Introduction | 简体中文
Since the output.chunkFilename of webpack cannot be used as a function, the resource version control cannot be completed under special circumstances, so the project was started。
If the following conditions exist, then using this tool to solve it is a feasible way。
- Need to add version number for each resource (js, css, images)
- Need to track changes in these resources
Based on regular expressions, the original unstable contenthash is now replaced with a controllable version number.
The whole process looks like this:
-
Existing default output
# File css/chunk.qwe123.css js/chunk.asd123.js # Quote <link href=/css/chunk.qwe123.css> <script src="/js/chunk.asd123.js"> # sourceMappingURL=chunk.asd123.js.map -
The output after modifying the webpack configuration
# File css/chunk.qwe123.css js/chunk.asd123.js # Quote <link href=/css/chunk.qwe123.css?v=qwe12> <script src="/js/chunk.asd123.js?v=asd12"> # sourceMappingURL=chunk.asd123.js.map?v=asd12 -
Output after using the tool
# File css/chunk.min.css js/chunk.min.js # Quote <link href=/css/chunk.min.css?v=8010> <script src="/js/chunk.min.js?v=8000"> # sourceMappingURL=chunk.min.js.map?v=8000
This tool only handles 2 to 3 steps, how to go from 1 to 2 step?
Modify the webpack configuration of the project, like this, so is css。
config.output
.chunkFilename('js/[name].[contenthash:10].js?v=[contenthash:8]')
.filename('js/[name].[contenthash:10].js?v=[contenthash:8]')
🎉 Thanks for reading, congratulations on understanding and mastering this simple tool
# global
yarn add contenthash2version -g
# or project
yarn add contenthash2version -D
# global
ch2version -p
# or project
add a reference to ch2version in package.json
"scripts": {
"ch2version": "ch2version",
...
}
yarn run ch2version -p
Usage: ch2version [options] <mode>
execute conversion command in base mode or update mode
Options:
-i, --inDir <path> set the path to read dir, defaults to ./dist
-o, --outDir <path> set the path to output dir, defaults to ./dist-version
-c, --config <filePath> set the path to config.json, defaults to ./ch2version.config.json
-ov, --outVersion <filePath> set the path to output version.json, defaults to ./ch2version.version.json
-v, --version <value> set the output resource version number, defaults to 8000
-lang, --language <type> set the language to display, defaults to en
-git, --git add git information to the version information, defaults to false
-r, --rewrite use the current configuration to rewrite the configuration file, defaults to false
-clear, --clear whether to clear the current output directory ? defaults to true
-p, --prompt enable command line prompt, defaults to false
-h, --help display help for command
For questions and support please use issues
Detailed changes for each release are documented in the release notes.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent