一、生成html文件的插件html-webpack-plugin 参考：https://www.cnblogs.com/wonyun/p/6030090.html
1.在src/pages目录下有多个文件夹a,b,c,...，分别存放不同的页面a.html,a.js,a.css；
2.通过遍历的方式将所有html文件打包到dist,并自动引入js
const activityEntry = config.entry;//activityEntry是一个数组，盛放页面文件夹的名称，如[a,b,c,...];
const HtmlWebpackPluginData = [];
//遍历生成多个HtmlWebpackPlugin实例
activityEntry.forEach(function (item) {
HtmlWebpackPluginData.push(
new HtmlWebpackPlugin({
filename: `${item}.html`,//输出的html文件 对应output 的path
template: path.join(__dirname, `src/pages/${item}/index.html`),
chunks: [item],
minify: { //压缩html代码
//删除空格
collapseWhitespace: true,
//删除注释
removeComments: true
}
})
);
//多个入口文件
entryData[item] = path.join(__dirname, `src/pages/${item}/index.js`);
})
module.exports = {
//入口
entry: {
...entryData
},
//出口
output: {
path: path.resolve(__dirname, "dist"),//打包的html css js文件都放到dist文件夹下
filename: "js/[name]_[chunkhash:8].js",//输出的js文件
// publicPath: "/"
},
}
plugins: [
...HtmlWebpackPluginData,
]
二、清除文件clean-webpack-plugin 参考：https://www.cnblogs.com/xiaozhumaopao/p/10792168.html
三、css样式抽离插件mini-css-extract-plugin 参考：https://www.cnblogs.com/blackgan/p/10590540.html
注：js文件可通过import引入 css/scss/less文件，使用mini-css-extract-plugin插件可使引入的样式文件从js文件拆离，生成单独的css文件；
plugins: [
new MiniCssExtractPlugin({
filename: `css/[name].css`,//输出的css文件 对应output
chunkFilename: "[id].css"
}),
]