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添加到包中吗？

---

编辑：

刚发现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代替导入非常重要，因为只有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。