webpack v4 如何处理生产模式下的 devDependencies？

Question

我想知道 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 到 bundle 中吗？

编辑：

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

这是使用 webpack mode 设置为 production:

生成的

Answer 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 可以像这样动态使用。

Answer 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。

webpack v4 如何处理生产模式下的 devDependencies？

How does webpack v4 handle devDependencies in production mode?

reactjs

webpack

react-hot-loader