webpack v4 在生产模式下如何处理 devDependencies？答案

【问题标题】：How does webpack v4 handle devDependencies in production mode?webpack v4 在生产模式下如何处理 devDependencies？
【发布时间】：2019-10-09 00:20:42
【问题描述】：

我想知道 webpack 在生产模式下如何处理devDependencies：

App.js

import { hot } from 'react-hot-loader';

function App() {
  // App code
}

export default process.env.NODE_ENV === 'development' ? hot(module)(App) : App;

我可以成功地在export 语句中使用三元组。但我不能这样做，也不能在import 语句中设置条件。

问题

处理这个问题的正确方法是什么（导入 devDependency）？

如果在导入时没有设置条件，webpack 会添加 devDependencies 到包中吗？

编辑：

刚刚发现 webpack 确实添加了 devDependencies 到包中：

这是使用 webpack 生成的，mode 设置为 production：

【问题讨论】：

标签： reactjs webpack react-hot-loader

【解决方案1】：

您可以为应用程序创建两个新文件app.dev.js 和app.prod.js，而在应用程序中您只需根据环境切换要求。

// App.js
let App;
if (process.env.NODE_ENV === 'development') {
  App = require('./app.dev.js')
} else {
  App = require('./app.prod.js')
}
export default App

编辑：

必须使用 require 而不是 import，因为只有 require 才能像这样动态使用。

【讨论】：

我可以用import代替require吗？
你不能使用import { hot } from 'react-hot-loader'，因为它不是动态的。如果您的应用设置为使用动态import()，您可以使用它，但它仍然是实验性的github.com/tc39/proposal-dynamic-import

【解决方案2】：

这是我用ignorePlugin解决它的方法

App.js

import { hot } from 'react-hot-loader'; 

function App() {
  // App code
}

export default process.env.NODE_ENV === 'development' ? hot(module)(App) : App;

webpack.prod.js（webpack 生产配置文件）

module.exports = merge(common, {
  mode: 'production',

  plugins:[
    new webpack.IgnorePlugin(/react-hot-loader/),  // <------ WILL IGNORE THE react-hot-loader
    new webpack.HashedModuleIdsPlugin(),
    new BundleAnalyzerPlugin()
  ],

这样react-hot-loader 在生产模式下会被忽略。

在开发中，我使用另一个 webpack 配置文件，它不使用 ignorePlugin。

【讨论】：