我有一个common
Webpack配置,并且有prod
和'identityServer'单独的配置来构建两个入口点。我在我的“公共”配置中使用CleanWebpackPlugin
来清理dist,但在identityServer
中不需要它。另外,我使用webpack-merge
合并两个配置。
脚本:
"build": "webpack --colors --config webpack/prod.js && webpack --config webpack/identityServer.js && cpx \"dist/**/*\" ../Ui --clean",
common.js
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: './src/main.js',
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.join(__dirname, '..'),
}),
new HtmlWebpackPlugin({
template: './src/index.ejs',
hash: true,
}),
new extractTextPlugin({
filename: 'bundle.css',
disable: false,
allChunks: true,
}),
],
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/',
},
module: {
rules:[
...some rules
],
},
performance: {hints: false},
optimization: {splitChunks:{chunks: 'all'}},
}
prod.js
module.exports = merge(common, {
mode: 'production',
devtool: false,
stats: 'minimal',
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
],
})
identityServer.js
const templates = {
index: {excludeChunks: ['identityServerModel']},
logout: {
excludeChunks: ['main'],
chunks: ['identityServerModel'],
inject: 'head',
},
error: {
excludeChunks: ['main'],
chunks: ['identityServerModel'],
},
}
const entryHtmlPlugins = Object.keys(templates).map(template => new HtmlWebpackPlugin({
template: `./src/components/loginPage/${template}.ejs`,
filename: `${template}.html`,
hash: true,
...templates[template],
}))
module.exports = merge(common, {
mode: 'production',
devtool: false,
stats: 'minimal',
entry: {
identityServerModel: './src/components/loginPage/identityServerModel.js',
main: './src/components/loginPage/login.js',
},
plugins: entryHtmlPlugins,
output: {
filename: '../[name].[chunkhash].js',
path: path.resolve(__dirname, '../dist/login'),
publicPath: '/',
},
})
干净dist两次的问题,因为我的脚本在prod.js
和identity.js
中常见的脚本合并运行两次。实际上,我已将其修复,仅在prod
中添加cleanwebpack插件。但是我想离开common
,因为我通常使用dev, prod, identity
配置。