如何消除死的 webpack 需要/导入

Question

我想根据环境(开发/生产(使用Webpack(v2.5.1(和UglifyJsPlugin删除某些文件要求/导入。

现状

export const IMAGES = Object.assign(
  {
    PROFILE: require('images/profile.png'),
    // ...
  },
  process.env.NODE_ENV !== 'production' && {'LOGO': require('images/logo.png')}
);

到目前为止，我已经知道，在生产构建之后，输出的 Javascript 文件不包含IMAGES.LOGO键，但输出中存在所需的images/logo.png文件。

我有一种预感，Webpack 在 Uglify 之前解析文件，然后保留它们，尽管在死代码消除后它们不再在任何地方使用。

有没有办法实现它？

Webpack 插件配置

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin({
  comments: false,
  sourceMap: true
})

Answer 1

通过 Webpack GitHub 存储库的问题，了解到死代码消除在此示例中不起作用。如果我用 if 子句更直接地重写它，它会起作用，如下所示：

export const IMAGES = {
  PROFILE: require('images/profile.png'),
  // ...
};
if (process.env.NODE_ENV !== 'production') {
 IMAGES.LOGO = require('images/logo.png');
}