具体配置如下:const{resolve}=require("path");constHtmlWebpackPlugin=require("html-webpack-plugin");constCopyWebpackPlugin=require("copy-webpack-plugin");constMiniCssExtractPlugin=require("mini-css-extract-plugin");constCssMinimizerWebpackPlugin=require("css-minimizer-webpack-plugin");module.exports={//Multi-entryentry:{page1:["./src/assets/js/page1.js"],page2:["./src/assets/js/page2.js"],page3:["./src/assets/js/page3.js"],},输出:{路径:resolve(__dirname,"dist"),文件名:"assets/js/[name][hash:10].js",},模块:{规则:[{test:/\.css$/,使用:[MiniCssExtractPlugin.loader,"css-loader"]},{测试:/\.(png|jpg|jpeg|gif|icon|webp)$/,type:"asset",parser:{dataUrlCondition:()=>{returnfalse;//css中不产生base64,全部打包为图片资源},},generator:{文件名:"assets/images/[name][hash:10][ext]",}},{test:/\.(woff|woff2|svg|eot|ttf)\??.*$/,type:"asset/resource",generator:{文件名:"assets/font/[name][hash:10][ext]",}},{test:/\.(htm|html)$/i,use:["html-withimg-loader"],//处理html中标签引入的图片路径}],},plugins:[newCopyWebpackPlugin({patterns:[{from:"./src/assets/js/common",//你要复制到的文件夹:"assets/js/common",//复制到哪个文件夹},{from:"./src/assets/images/icon",//要复制到的文件夹:"assets/images/icon",//复制到哪个文件夹},],}),newHtmlWebpackPlugin({template:"./src/index1.html",//webpack模板相对或绝对路径文件名:“index1.html”,//将HTML写入块的文件:[”page1"],//需要添加的js文件hash:true,//在hash值中添加css和jsinject:"body",//所有资源注入的地方scriptLoading:"blocking",//script标签加载方法minify:{//collapseWhitespace:true,removeComments:true,},}),newHtmlWebpackPlugin({template:"./src/index2.html",filename:"index2.html",chunks:["page2"],hash:true,inject:"body",scriptLoading:"blocking",minify:{//collapseWhitespace:true,removeComments:true,},}),newHtmlWebpackPlugin({模板:"./src/index3.html",filename:"index3.html",chunks:["page3"],hash:true,inject:"body",scriptLoading:"blocking",minify:{//collapseWhitespace:true,removeComments:true,},}),新的MiniCssExtractPlugin({//chunkFilename:"[id].css",filename:"assets/css/style[hash:10].css",}),//将css提取到单独的文件中newCssMinimizerWebpackPlugin(),//用于css压缩],//模式:"开发",模式:"生产",};打包前需要注意以下几点:html中通过链接导入的css需要替换为:importinjsthroughimportintohtmlthrough导入的page1.js、page2.js、page3.js等入口文件byscript需要先评论
