在使用webpack进行项目打包的时候,我们可通过以下方式对不同类型的资源,进行文件名或文件路径的修改
1、使用copy-webpack-plugin插件复制的文件,这个就是配置from和to
new CopyPlugin({ patterns: [ { from: "**
的形式存在const Login = () => import( '../components/login.vue')
在webpack 4的版本中chunkFilename必须是一个字符串,但是在webpack 5中,他也可以像filename一样设置一个函数,去自定义文件路径和文件名。
chunkFilename字符串占位符对应的结果和filename一样,可以由以下参数拼接或者返回
3、修改css文件的文件名
webpack对css文件的打包需要用到插件,之前的webpack使用extract-text-webpack-plugin进行css文件打包,这里不讲了,现在的webpack使用mini-css-extract-plugin进行css文件打包。
在mini-css-extract-plugin的配置中,同样有关于filename和chunkFilename的配置,具体用法和修改js文件名的配置一样。
const MiniCssExtractPlugin = require('mini-css-extract-plugin') new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional // filename: utils.assetsPath('css/[name].[contenthash].css'), filename: (pathData) => { return pathData.chunk.name == 'main' ? utils.assetsPath('css/youfilename.[hash].css') : utils.assetsPath('css/[name].[hash].css') }, chunkFilename: (pathData) => { return utils.assetsPath('css/[id].[hash].css') }, })
4、修改其他资源文件(图片、视频等)的文件名
webpack对图片等资源文件的打包需要用到url-loader 或者 file-loader 去合理地处理它们,而url-loader内部也是封装了file-loader去处理
webpack中对图片等资源的打包配置在module.rules中,rules中可以通过options属性值,把配置传递给url-loader或者file-loader。file-loader的配置项中有一个属性name,我们可以通过配置这个name属性来修改打包文件的文件路径和文件名,name的配置同样支持字符串占位符和函数两种形式,通常我们像下面一样配置字符串的形式
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { // 10000字节以下的图片会被转换为base64编码 limit: 10000, // 生成 name+7位hash+ext格式的文件名 name: utils.assetsPath('img/[name].[hash:7].[ext]') } }
其中[name]、[hash]等占位符都和filename的占位符一样
除了字符串形式,还可以像下面一样配置更灵活的函数形式{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { // 10000字节以下的图片会被转换为base64编码 limit: 10000, // 生成 name+7位hash+ext格式的文件名 name: function(filepath){ let filename = filepath.split('\\').pop() return process.env.NODE_ENV !== 'development' && filename == 'xxx.png' ? utils.assetsPath('img/youfilename.[ext]') : utils.assetsPath('img/[name].[hash:7].[ext]') } } },
到此这篇关于webpack打包时如何修改文件名的实现示例的文章就介绍到这了,更多相关webpack打包时修改文件名内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
- 历年真题答案解析
- 备考技巧名师总结
- 高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
相关文章
发现更多好内容- Uncomtrade数据库异地备份指南
- CORS 在微服务架构中的应用场景有哪些?(cors在微服务架构中的应用场景)
- 如何在 Java 中创建 Maven 项目?(java怎么创建maven项目)
- 如何高效使用Uncomtrade数据库进行查询
- Java 配置环境变量后如何进行使用操作?(java配置环境变量后如何使用)
- Java 中防止接口重复提交的方法有哪些?(java接口防止重复提交的方法是什么)
- 如何提高 Java Office 的性能?(java office 怎样提高性能 )
- Java 抽象工厂模式的优缺点有哪些?(java抽象工厂模式有哪些优缺点)
- 在 Java 中,charsequence 的具体用法究竟是什么?(java中charsequence的用法是什么)
- 如何利用 Java Quarter 进行数据挖掘?(java quarter如何进行数据挖掘)