Webpack 配置：有条件地导入模块答案

【问题标题】：Webpack config: Conditionally import moduleWebpack 配置：有条件地导入模块
【发布时间】：2016-05-11 21:15:54
【问题描述】：

所以我想做：

if (process.env.NODE_ENV === 'production') {
  import StatsPlugin from 'webpack-stats-plugin';
}

但是 eslint 说：

Parsing error: 'import' and 'export' may only appear at the top level

我正在使用 babel-eslint 解析器。

这是否意味着我不能有条件地加载模块？

【问题讨论】：

【解决方案1】：

ES2015 模块无法实现动态同步导入。只能通过import() 异步导入动态导入内容。

你为什么不直接导入并有条件地应用它？

import StatsPlugin from 'webpack-stats-plugin';

...

if (process.env.NODE_ENV === 'production') {
  config.plugins.push(new Statsplugin())
}

【讨论】：

如果我导入一个模块并且以后不在我的代码中的任何地方引用它（即本质上包含但不使用），webpack 是否仍将它包含在包中？
webpack 1 仍然会包含它，因为 CommonJS 不允许这种优化，webpack 2 可以在使用 ES2015 模块时删除未使用的函数。此功能称为摇树。
@jhnns 您能否在答案中包含该评论？我被类似的情况驱使到这里，但似乎使用 Webpack 2 已经进行了优化。
@jhnns webpack 1 有什么办法可以在if (process.env.NODE_ENV === 'production') { config.plugins.push(new require('webpack-stats-plugin')()) } 之类的条件中排除required 模块？好像有可能……
当您编写if (PRODUCTION) 时，您可以使用DefinePlugin 将所有出现的PRODUCTION 替换为false。 Webpack 不会在死代码分支中跟随require()。不幸的是，if ("production" === "production") { 目前未被检测为死代码分支