使用您的示例,我更喜欢以下方式:
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.LoaderOptionsPlugin({
debug: true
}),
new CopyWebpackPlugin([
{from: 'src/www/'}
])
NODE_ENV === 'production' && new BundleAnalyzerPlugin(),
NODE_ENV === 'production' && new CompressionPlugin({
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/
}),
NODE_ENV === 'production' && new UglifyJsPlugin({
test: /\.js(\?.*)?$/i
})
].filter(n => n)
或者如果您更喜欢ES5:
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.LoaderOptionsPlugin({
debug: true
}),
new CopyWebpackPlugin([
{from: 'src/www/'}
])
NODE_ENV === 'production' && new BundleAnalyzerPlugin(),
NODE_ENV === 'production' && new CompressionPlugin({
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/
}),
NODE_ENV === 'production' && new UglifyJsPlugin({
test: /\.js(\?.*)?$/i
})
].filter(function (plugin) { return plugin; })
这段代码的作用是将一个条件判断 (NODE_ENV === 'production'
) 添加到数组中,这只是告诉JS编译器将false
或右侧代码写入该数组。另一方面,filter
函数仅表示过滤掉值为 false
或类似 false 的内容。
假设我们在 NODE_ENV='development'
环境下,我们的插件将如下所示:
[HotModuleReplacementPlugin, NamedModulesPlugin, LoaderOptionsPlugin, CopyWebpackPlugin, false, false, false].filter(...)
在过滤器完成其工作后,我们得到了如下结果:
[HotModuleReplacementPlugin, NamedModulesPlugin, LoaderOptionsPlugin, CopyWebpackPlugin]
如果我们现在假设 NODE_ENV = 'production'
,我们的插件将如下所示:
[HotModuleReplacementPlugin, NamedModulesPlugin, LoaderOptionsPlugin, CopyWebpackPlugin, BundleAnalyzerPlugin, CompressionPlugin, UglifyJsPlugin].filter(...)
在筛选功能完成后,我们得到了这个结果:
[HotModuleReplacementPlugin, NamedModulesPlugin, LoaderOptionsPlugin, CopyWebpackPlugin, BundleAnalyzerPlugin, CompressionPlugin, UglifyJsPlugin]