webpack打包时如何修改文件名的实现示例

 更新时间:2022年06月15日 10:41:33   作者:hfhan  
本文主要介绍了webpack打包时如何修改文件名的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在使用webpack进行项目打包的时候,我们可通过以下方式对不同类型的资源,进行文件名或文件路径的修改

1、使用copy-webpack-plugin插件复制的文件,这个就是配置from和to

new CopyPlugin({
  patterns: [
    {
      from: "**/**.txt",
      to: "xx/xx.ext"
    },
  ],
})

2、修改js文件的文件名

在webpack中有一个output的配置项,可以在这里配置js文件的文件路径和文件名

修改入口文件的文件名通过配置output的filename属性,可以动态的改变入口文件的文件路径和文件名,通常的我们会这样设置filename: "[name].[chunkhash].js",而其中的name就是文件名修改的关键,这个name我们可以在entry入口中进行定义

entry:{
    index: path.resolve(__dirname, './src/index.js'),
    youindex: path.resolve(__dirname, './src/index.js')
}

在entry中也可以配置某一个库/组件的文件进行打包

entry:{
    ol: path.resolve(__dirname, './static/ol/ol_me.js'),
}

filename除了可以设置类似占位符格式的字符串,还可以是一个函数,函数第一个参数中包含了打包文件的一系列信息,根据这些信息,可以去自定义打包文件的输出名称

output:{
    filename: (pathData) => {
        return pathData.chunk.name === 'main' ? utils.assetsPath('js/youfilename.js') : utils.assetsPath('js/[name].[chunkhash].js');
    }
}

filename占位符字符串对应的结果可以由以下参数拼接或者返回

修改非入口(按需引入)文件的文件名通过配置output的chunkFilename 属性,可以动态的改变非入口文件的文件路径和文件名,通常的我们会这样设置chunkFilename: "[name].[chunkhash].js",而其中的name就是文件名修改的关键。

chunkFilename 指未被列在 entry 中,却又需要被打包出来的 chunk 文件的名称,output.chunkFilename 默认使用[id].js或从 output.filename 中推断出的值,id是输出文件的块id,一般是从1开始叠加的数字,除了[id]还可以配置占位符[name],[name]是文件按需引入时配置的chunkName值,如果没有配置chunkName,[name] 会被预先替换为 [id]。

配置好chunkFilename后,还需要在文件按需引入时配置chunkName值,早期的按需引入使用require.ensure(),这就不说了,现在按需引入基本都是使用import(),在import()中我们加入chunkFilename 的配置,就可以修改打包后的文件路径和文件名,配置以/* webpackChunkName: “xxx” */的形式存在

const Login = () => import(/* webpackChunkName: "myLogin" */ '../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打包时修改文件名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信分享调用jssdk实例

    微信分享调用jssdk实例

    这篇文章主要为大家详细介绍了微信分享调用jssdk实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 原生javascript+CSS实现轮播图效果

    原生javascript+CSS实现轮播图效果

    这篇文章主要为大家详细介绍了原生javascript+CSS实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js变量值传到php过程详解 将php解析成数据

    js变量值传到php过程详解 将php解析成数据

    这篇文章主要介绍了js变量值传到php过程详解 将php解析成数据,传参数去后台,用ajax,或者原生js方式拼接url。明白原理,洞悉系统是先解析php,再执行html代码和js代码。,需要的朋友可以参考下
    2019-06-06
  • Bpmn.js activiti 流程编辑器详细教程

    Bpmn.js activiti 流程编辑器详细教程

    流程编辑器是一种用于创建、编辑和管理流程图的工具,它提供了一个可视化的界面,使用户能够以图形化的方式定义和配置流程的各个步骤、条件和流程间的关系,说明关于bpmn.js的一些事件, 通过本文你可以了解到,感兴趣的朋友一起看看吧
    2023-10-10
  • 原生Js Canvas去除视频绿幕背景的方法实现

    原生Js Canvas去除视频绿幕背景的方法实现

    本文主要介绍了原生Js Canvas去除视频绿幕背景的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-09-09
  • JS中SetTimeout和SetInterval使用初探

    JS中SetTimeout和SetInterval使用初探

    这篇文章主要介绍了JS中SetTimeout和SetInterval使用初探,需要的朋友可以参考下
    2017-03-03
  • 微信小程序项目总结之点赞 删除列表 分享功能

    微信小程序项目总结之点赞 删除列表 分享功能

    这篇文章主要介绍了微信小程序项目总结之点赞 删除列表 分享功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • 解析JS在获取当前月的最后一天遇到的坑

    解析JS在获取当前月的最后一天遇到的坑

    这篇文章主要介绍了解析JS在获取当前月的最后一天遇到的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JS模式之单例模式基本用法

    JS模式之单例模式基本用法

    这篇文章主要介绍了JS模式之单例模式基本用法,实例分析了javascript单例模式的基本实现方法,需要的朋友可以参考下
    2015-06-06
  • JS与框架页的操作代码

    JS与框架页的操作代码

    JS与框架页的操作函数代码,多用于控制框架页,一般后台利用的比较多。
    2010-01-01

最新评论