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

一，打包生成不同的文件名

为了避免浏览器缓存被命中，可以让打包出来的文件名不一样：

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

二，第三方依赖统一放置到文件名不变的chunk中

具体配置：

output: { 
    path: path.resolve(__dirname, "dist"), //设置打包的出口,需要是绝对路径，而__dirname是node的一个全局变量，记录当前文件的绝对路径 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" } } } } 

三，配置打包后的文件路径

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

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

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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rgzn-sdxx/11031.html