webpack5学习与实战（八）配置打包后的文件名

一&＃xff0c;打包生成不同的文件名

为了避免浏览器缓存被命中&＃xff0c;可以让打包出来的文件名不一样&＃xff1a;

output: {path: path.resolve(__dirname, "dist"), //设置打包的出口,需要是绝对路径&＃xff0c;而__dirname是node的一个全局变量&＃xff0c;记录当前文件的绝对路径filename: "[name]_[contenthash]_bundle.js", //设置打包出来的js的文件名clean: true, //清除上次打包出来的文件assetModuleFilename: "images/[contenthash][ext]" //自定义asset module资源打包后的路径和名字},


二&＃xff0c;第三方依赖统一放置到文件名不变的chunk中

具体配置&＃xff1a;

output: {path: path.resolve(__dirname, "dist"), //设置打包的出口,需要是绝对路径&＃xff0c;而__dirname是node的一个全局变量&＃xff0c;记录当前文件的绝对路径filename: "[name]_bundle.js", //设置打包出来的js的文件名clean: true, //清除上次打包出来的文件assetModuleFilename: "images/[contenthash][ext]" //自定义asset module资源打包后的路径和名字},。。。optimization: {minimizer: [new CssMinimizerPlugin()],splitChunks: {cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name: "vendors",chunks: "all"}}}}

三&＃xff0c;配置打包后的文件路径

当我们想分门别类地放置打包出来地文件&＃xff0c;比如js放在script文件夹下&＃xff0c;css放置在style下&＃xff0c;图片放置在image下时&＃xff0c;可以这样配置&＃xff1a;

output: {path: path.resolve(__dirname, "dist"), //设置打包的出口,需要是绝对路径&＃xff0c;而__dirname是node的一个全局变量&＃xff0c;记录当前文件的绝对路径filename: "script/[name]_bundle.js", //设置打包出来的js的文件名&＃xff0c;放置在script下clean: true, //清除上次打包出来的文件assetModuleFilename: "images/[contenthash][ext]" //自定义asset module资源打包后的路径和名字&＃xff0c;如图片等
},
...
plugins: [new HtmlWebpackPlugin({template: "./index.html", //用来做模板的html的文件路径filename: "index.html", //生成的html的名字inject: "body" //打包出来的那个js文件&＃xff0c;放置在生成的body标签内}),new MiniCssExtractPlugin({filename: "styles/[contenthash].css" //配置css打包之后的存放路径})],

这样打包出来就是这个样子: