chunk-filename-replace-webpack-plugin/README.md

ChunkFilename for Webpack4, and dynamically imported chunk names (paths)

# chunk-filename-replace-webpack-plugin

中文文档：https://github.com/jaysding/chunkFilename-replace-webpack-plugin/blob/master/README.ch.md

ChunkFilename for Webpack4, and dynamically imported chunk names (paths), rename the dist files generated by the Webpack build.

⚠️ This plugin is implemented based on internal webpack4 MainTemplate/ChunkTemplate, because webpack5 packaging template has refactoring. MainTemplate ChunkTemplate/ModuleTemplate abandoned, so this plug-in supports to webpack4 webpack chunkFilename has support personalized modification

## advantages

 - Even with webpack4, you can customize any chunkFilename(MiniCssExtractPlugin: what are you looking at me for?).
 - 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
 - This plugin can also change the names of dynamically imported chunks
 - You can still name chunk files with templates such as [contenthash], [chunkhash] and [name]



## Getting Started

You need to install `chunkFilename-replace-webpack-plugin`:

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



**webpack.config.js**

```javascript
const ChunkFilenameReplaceWebpackPlugin = require('chunk-filename-replace-webpack-plugin');
module.exports = {
	// ...
	plugins: [
        new ChunkFilenameReplaceWebpackPlugin([{
            from: {
                css: 'marvo'
            }, // Match chunkName to marvo CSS file
            to: {
                css: 'css/[name].ironman.[contenthash:4].css'
            }, // modified into css/[name].ironman.[contenthash:4].css
        },
        {
            from: {
                css: 'spiderman',
                js: 'spiderman'
            }
            to: {
            	css: 'css/marvo.chunk.spiderman.css',
            	js: 'js/marvo.chunk.[chunkhash:6].spiderman.js'
        	}
        }])
	]
}
```



```
⚠️ The field in 'from' must be chunkId!
```



## 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 | {Object} | {css: String\|RegExp,<br />js: string} | The target chunkFilename that needs to be modified can be either a string or a regular expression. The string is an exact match and the re is a fuzzy match. The target of the match is the chunk file generated by the WebPack splitting code, so the from option matches the **chunkId** within the Webpack |
| to   | {Object} | {css: string,<br />js: string}         | The name of the file (path) you want to change to            |



## 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