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打包之后的存放路径})],

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

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

webpack代理配置打包后接口404_webpack 从零开始
什么是webpack? webpack 可以看做是是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖 ...
android 自定义打包文件类型,Android Studio配置打包生成自定义文件名
https://blog.csdn.net/and_you_with_me/article/details/78799226 ## 举例 ~~~ apply plugin: 'com.android. ...
webpack打包后引用cdn的js_呕心沥血编写的webpack多入口零基础配置【建议收藏】...
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
vue项目接口地址暴露_vue项目打包后可以配置接口地址的方法
因为项目测试的需要,我需要给测试人员一个项目的测试环境版本和生产环境版本,两个版本的区别就是请求的接口地址不一样而已,一开始,我是在webpack配置了不同的命令,让测试去打包,比如:使用npm ru ...
Python3《机器学习实战》学习笔记（八）：支持向量机原理篇之手撕线性SVM
原 Python3<机器学习实战>学习笔记(八):支持向量机原理篇之手撕线性SVM 置顶 2017年09月23日 17:50:18 阅读数:12644 转载请注明作者和出处: https: ...
golang学习笔记8 beego参数配置打包linux命令
golang学习笔记8 beego参数配置打包linux命令参数配置 - beego: 简约 & 强大并存的 Go 应用框架 https://beego.me/docs/mvc/contr ...
Webpack5学习笔记（基础篇五）—— mode之Development环境相关参数配置
在Webpack5中,mode(模式)有三种: development(开发环境模式) production(生产环境模式) none或' '(空) 在不同模式中,我们可能对于webpack.conf ...
如何修改Vue打包后文件的接口地址配置
1.背景常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...
nginx配置 vue打包后的项目解决刷新页面404问题|nginx配置多端访问
访问vue页面时,/# 使url看着不美观,使用 H5 history模式可以完美解决这个问题,但需要后端nginx帮助.接下来我们自己配置一下. 使用前端路由,但切换新路由时,想要滚动到页面顶部,或 ...
vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...
1.背景常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...

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

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

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

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

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

最新文章

热门文章