How to modify the file name when webpack is packaged

When using webpack for project packaging, we can modify the file name or file path of different types of resources in the following ways

1. The files copied using the copy-webpack-plugin plugin, this is the configuration from and to

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

2. Modify the file name of the js file There is an output configuration item in webpack, where you can configure the file path and file name of the js file

Modify the file name of the entry file <br>By configuring the filename attribute of the output, you can dynamically change the file path and file name of the entry file. Usually we will set it like this filename: "[name].[chunkhash].js" , and the name is the file name The key to modification, this name we can define in the entry entry

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

You can also configure a library/component file for packaging in entry

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

In addition to setting a string similar to a placeholder format, filename can also be a function. The first parameter of the function contains a series of information about the packaged file. According to this information, the output name of the packaged file can be customized.

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

The result corresponding to the filename placeholder string can be concatenated or returned by the following parameters:

Modify the file name of the non-entry (introduced on demand) file <br>By configuring the chunkFilename attribute of the output, you can dynamically change the file path and file name of the non-entry file, usually we will set it like this chunkFilename: "[name].[chunkhash].js" , The name is the key to file name modification.

chunkFilename refers to the name of the chunk file that is not listed in the entry but needs to be packaged. output.chunkFilename uses [id].js or the value inferred from output.filename by default. id is the block id of the output file. Generally, it is a number superimposed from 1. In addition to [id], you can also configure a placeholder [name]. [name] is the chunkName value configured when the file is imported on demand. If chunkName is not configured, [name] will be pre-replaced with [id].

After configuring the chunkFilename, you also need to configure the chunkName value when the file is imported on demand. In the early on-demand import, require.ensure() is used, which is not to mention. Now the on-demand import basically uses import(), and in import( ) in the configuration of chunkFilename, we can modify the packaged file path and file name, and the configuration exists in the form of /* webpackChunkName: “xxx” */

 const Login = () => import(/* webpackChunkName: "myLogin" */ '../components/login.vue')

In the version of webpack 4 chunkFilename must be a string, but in webpack 5, he can also set a function like filename to customize the file path and file name.

The result corresponding to the chunkFilename string placeholder is the same as filename, which can be spliced or returned by the following parameters:

3. Modify the file name of the css file
The packaging of css files by webpack requires plug-ins. The previous webpack used extract-text-webpack-plugin to package css files. I will not talk about it here. Now webpack uses mini-css-extract-plugin to package css files.

In the configuration of mini-css-extract-plugin, there are also the configuration of filename and chunkFilename. The specific usage is the same as the configuration of modifying the js file name.

 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. Modify the file names of other resource files (pictures, videos, etc.)
For the packaging of resource files such as pictures, webpack needs to use url-loader or file-loader to process them reasonably, and url-loader also encapsulates file-loader to process them.

The packaging configuration of resources such as images in webpack is in module.rules. In rules, the configuration can be passed to url-loader or file-loader through the options attribute value. There is an attribute name in the configuration item of file-loader. We can modify the file path and file name of the packaged file by configuring this name attribute. The configuration of name also supports two forms of string placeholders and functions. Usually we look like the following The same configuration string form

 {
    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]')
    }
  }

Among them, placeholders such as [name] and [hash] are the same as the placeholders of filename. In addition to the string form, you can also configure a more flexible function form as follows

 {
  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]')
    }
  }
},