一、设置入口文件
// webpack.common.js
const srcPath = path.join(__dirname, '..', 'src');
module.exports = {
entry: {
index: path.join(srcPath, 'index.js'),
other: path.join(srcPath, 'other.js')
},
// ...
}
设置入口文件为src目录下的index.js和other.js文件
二、配置对应的html文件
需要安装html-webpack-plugin插件
// webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const srcPath = path.join(__dirname, '..', 'src');
module.exports = {
// ...
plugins: [
// 多入口 - 生成 index.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'index.html'),
filename: 'index.html',
// chunks 表示该页面要引用哪些 chunk (即上面的 index 和 other),默认全部引用
chunks: ['index'] // 只引用 index.js
}),
// 多入口 - 生成 other.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'other.html'),
filename: 'other.html',
chunks: ['other'] // 只引用 other.js
})
]
}
三、配置出口文件
// webpack.prod.js
const distPath = path.join(__dirname, '..', 'dist');
module.exports = merge(webpackCommonConf, {
// ...
output: {
filename: '[name].[contenthash:8].js',
path: distPath,
},
// ...
})
在打包前需要将输出目录,这里是dist目录,里面的文件清空,需要安装clean-webpack-plugin插件
// webpack.prod.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = merge(webpackCommonConf, {
// ....
plugins: [
new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
// ...
]
})