我们使用Webpack DefinePlugin为不同的渲染模式生成输出束。因此,例如,我们的webpack配置将返回:
在代码中,我们将执行
这样可以生成更适合每种渲染模式的捆绑包。然而,随着我们的渲染模式增加,我们正在运行多个webpack编译,大大降低了编译速度。我有一些解决这个问题的想法,希望听到更多的意见:
[{
entry: {
mode1: "./input.es6",
},
output: {
path: path.join(__dirname, 'dist'),
filename: "[name]-bundle.js",
},
plugins: [
new webpack.DefinePlugin({
__RENDER_MODE__: 'mode1',
}))
]
},{
entry: {
mode2: "./input.es6",
},
output: {
path: path.join(__dirname, 'dist'),
filename: "[name]-bundle.js",
},
plugins: [
new webpack.DefinePlugin({
__RENDER_MODE__: 'mode2',
}))
]
}]
在代码中,我们将执行
if (__RENDER_MODE__ === 'mode1') {
require('jquery-ui')
}
if (__RENDER_MODE__ === 'mode2') {
require('other-lib')
}
这样可以生成更适合每种渲染模式的捆绑包。然而,随着我们的渲染模式增加,我们正在运行多个webpack编译,大大降低了编译速度。我有一些解决这个问题的想法,希望听到更多的意见:
- 是否有一种方法可以使用1个单独的webpack编译,并在编译完成后进行定义插件替换?因此,我们不是在编译时使用DefinePlugin替换变量,而是只编译一次,然后在之后进行替换。
- 或者,是否有一种方法可以对每个条目进行定义插件配置?每个条目都会有单独的DefinePlugin配置。