多页面应用打包
- 在
webpack.config.js中修改入口和出口配置
// 1. 修改为多入口
entry: {
main: './src/main.js',
other: './src/other.js'
},
output: {
path: path.join(__dirname, './dist/'),
// filename: 'bundle.js',
// 2. 多入口无法对应一个固定的出口, 所以修改filename为[name]变量
filename: '[name].bundle.js',
publicPath: '/'
},
plugins: [
// 3. 如果用了html插件,需要手动配置多入口对应的html文件,将指定其对应的输出文件
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
chunks: ['main']
}),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'other.html',
// chunks: ['other', 'main']
chunks: ['other']
})
]
修改入口为对象，支持多个js入口，同时修改output输出的文件名为'[name].js'表示各自已入口文件名作为输出文件名，但是html-webpack-plugin不支持此功能，所以需要再拷贝一份插件，用于生成两个html页面，实现多页应用.
