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.
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
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, 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, 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