- 1 基础 webpack 入口 配置
module.exports = {
entry: {
'page1': './src/pages/page1/app.js', // 页面1
'page2': './src/pages/page2/app.js', // 页面2
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]/[name]-bundle.js', // filename不能写死，只能通过[name]获取bundle的名字
}
}
- 2 配置多个HtmlWebpackPlugin 生成多个html文件
module.exports = {
plugins: [
new HtmlWebpackPlugin(
{
template: './src/pages/page1/index.html',
chunks: ['page1'],
}
),
new HtmlWebpackPlugin(
{
template: './src/pages/page2/index.html',
chunks: ['page2'],
}
),
]
}
HtmlWebpackPlugin一定要配 chunks，否则所有页面的js都会被注入到当前html里
- 3 代码分割(配置
optimization即可)- 把多个页面共用的第三方库单独打包出一个vendor.js
- 把多个页面共用的逻辑代码和共用的全局css(比如css-reset,icon字体图标)单独打包出common.js和common.css
- 把运行时代码单独提取出来manifest.js
- 把每个页面自己的业务代码打包出page1.js和page1.css
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
// 打包业务中公共代码
common: {
name: "common",
chunks: "initial", // 共享的代码
priority: 0, // 优先级
minChunks: 2, // 同时引用了2次才打包
},
// 打包第三方库的文件
vendor: {
name: "vendor",
test: /[\\/]node_modules[\\/]/,
chunks: "initial",
priority: 10,
minChunks: 2, // 同时引用了2次才打包
}
}
},
runtimeChunk: { name: 'manifest' } // 运行时代码
}
}
多页面打包的原理就是：配置多个entry和多个HtmlWebpackPlugin
