filename-replace-webpack-plugin

Rename the dist files generated by the Webpack build.

advantages

• Even if it's not webpack5, you can change the chunk file to any name you want (MiniCssExtractPlugin: what are you looking at me for?).
• You can customize file paths (including chunk)
• For the object file to be modified, you can use the exact match with the re, or you can use the string fuzzy match directly

Getting Started

You need to install filename-replace-webpack-plugin:

npm install --save-dev filename-replace-webpack-plugin

webpack.config.js

const FilenameReplaceWebpackPlugin = require('./plugins/filename-replace-webpack-plugin');
module.exports = {
	// ...
	plugins: [
        new FilenameReplaceWebpackPlugin([{
            from: /main.*\.js$/, // matching main.*****.js
            to: 'index.ironman.js', // modified into index.ironman.js
            // clone: true, // the true will keep the original file
            // replace: (filename) => { // The regex function replaces the file name more precisely with the regular expression. The argument is the source file name and the return value is the new name
            //     let reg = /^(.*)main(\.*.*)\.js$/g;
            //     return reg.test(filename) && filename.replace(reg, (match, ...p) => {
            //         return match.replace(p[1], '')
            //     })
            // } // This method removes any characters between 'main' and '.js'
        },{
            from: /main.*\.css$/, // matching main.*****.css
            to: '/css/index.spiderman.css', // modified into index.spiderman.css
        }])
	]
}

⚠️ 'from' must be used with 'to', 'replace' must be used alone, and if they both appear at the same time the replace rule takes precedence

Plugin Options

Options can be an object or an array of objects: Object, Array<Object>

If options is an array of objects, multiple matching rules can change multiple file names at the same time

| Name | Type | Default | Description | | ------- | --------------- | ----------- | ------------------------------------------------------------ | | from | {String/RegExp} | undefind | The target file, that needs to be modified will match the packaged file fuzzy matching on the filled string (which means multiple files may be modified) if it is of type RegExp (you can use it to match file suffixes to constrain the file type) | | to | {String} | '' | The name of the file (path) you want to change to | | replace | {Function} | undefind | When you need to change the name of a file more precisely, you can use this function, which params is original file name and returns the name of the file you want to change | | clone | {Boolean} | false | True will retain the original file, copy a new file from the original file and rename it according 'to' or 'replace' |

SomeTimes

When you use code splitting, you might pull out some chunk files, such as packaging an ElementUI component library from business code, which produces JS files and CSS files, If your requirement is to package ElementUI separately and name it 'ElementUI.js' and 'ElementUI.css ', you can use splitChunks.cacheGroups to name the package and the js file you package is 'ElementUI.js'. The CSS file needs to be named mini-css-extract-plugin with the following configuration: chunkFilename: /css/[name].css, but other chunk css files may require the 'contenthash' value. If 'contenthash' is added to chunkFilename option, 'ElementUI.css' will also be added to 'contenthash', This is not what you want, so you can use this plugin to name 'ElementUI.css' separately