为了正确设置webpack配置,使其包含多页面应用程序中使用的常用块,你可以按照以下步骤进行操作:
entry: {
page1: './src/page1.js',
page2: './src/page2.js'
}
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
}
这将生成名为page1.bundle.js
和page2.bundle.js
的输出文件。
html-webpack-plugin
插件来实现这一点。例如:plugins: [
new HtmlWebpackPlugin({
template: './src/page1.html',
filename: 'page1.html',
chunks: ['page1']
}),
new HtmlWebpackPlugin({
template: './src/page2.html',
filename: 'page2.html',
chunks: ['page2']
})
]
这将生成名为page1.html
和page2.html
的HTML文件,并将对应的脚本文件自动注入到HTML中。
splitChunks
配置来实现这一点。例如:optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: 'common',
chunks: 'all',
minChunks: 2
}
}
}
}
这将提取出至少被两个页面使用的代码块,并生成名为common.bundle.js
的公共块文件。
通过以上配置,你可以正确设置webpack配置,使其包含多页面应用程序中使用的常用块。每个页面都会生成独立的输出文件,并且公共的代码块会被提取为单独的文件,以提高性能和减少重复加载。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云