webpack打包时怎么修改文件名

这篇“webpack打包时怎么修改文件名”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“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打包时怎么修改文件名”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。