Find the unused resource unused-webpack-plugin in the project
According to webpack statistics, it can find out unused resources in the project, including images, JS, CSS, HTML and other resources, which is very useful in project reconstruction
Effect:
Usage:
webpack.dev.config.js
const UnusedWebpackPlugin = require('unused-webpack-plugin') module.exports = { ... , plugins: [ new UnusedWebpackPlugin({ directories: [path.join(__dirname, 'src')], root: path.join(__dirname, './') }) ] }Copy the codeProject address: Github
Collecting Statistics
Webpack collects statistics during the running process, including assets, chunks, Modules, entrypoints, namedChunkGroups, Errors, and Warnings
Usage:
Json file NPX webpack --json > stats.jsonCopy the codestats.json
{
"hash": "897897e89cdd305485ad",
"version": "5.38.1",
"time": 214,
"builtAt": 1623295024353,
"publicPath": "auto",
"outputPath": "/Users/xcc/Documents/xcc/tl/app/aep/dist",
"assetsByChunkName": {
"main": ["main.js"]
},
"assets": [
{
"type": "asset",
"name": "main.js",
"size": 352,
"emitted": false,
"comparedForEmit": false,
"cached": true,
"info": {
"javascriptModule": false,
"minimized": true
},
"chunkNames": ["main"],
"chunkIdHints": [],
"auxiliaryChunkNames": [],
"auxiliaryChunkIdHints": [],
"related": {},
"chunks": [179],
"auxiliaryChunks": [],
"isOverSizeLimit": false
}
],
"chunks": [
{
"rendered": true,
"initial": true,
"entry": true,
"recorded": false,
"size": 1033,
"sizes": {
"javascript": 1033
},
"names": ["main"],
"idHints": [],
"runtime": ["main"],
"files": ["main.js"],
"auxiliaryFiles": [],
"hash": "cc1b38641cf24d32d65e",
"childrenByOrder": {},
"id": 179,
"siblings": [],
"parents": [],
"children": [],
"modules": [
{
"type": "module",
"moduleType": "javascript/auto",
"layer": null,
"size": 1033,
"sizes": {
"javascript": 1033
},
"built": true,
"codeGenerated": true,
"buildTimeExecuted": false,
"cached": false,
"identifier": "/Users/xcc/Documents/xcc/tl/app/aep/src/index.js",
"name": "./src/index.js",
"nameForCondition": "/Users/xcc/Documents/xcc/tl/app/aep/src/index.js",
"index": 0,
"preOrderIndex": 0,
"index2": 0,
"postOrderIndex": 0,
"cacheable": true,
"optional": false,
"orphan": false,
"dependent": false,
"issuer": null,
"issuerName": null,
"issuerPath": null,
"failed": true,
"errors": 1,
"warnings": 0,
"id": 138,
"issuerId": null,
"chunks": [179],
"assets": [],
"reasons": [
{
"moduleIdentifier": null,
"module": null,
"moduleName": null,
"resolvedModuleIdentifier": null,
"resolvedModule": null,
"type": "entry",
"active": true,
"explanation": "",
"userRequest": "./src",
"loc": "main",
"moduleId": null,
"resolvedModuleId": null
}
],
"usedExports": [],
"providedExports": null,
"optimizationBailout": [
"ModuleConcatenation bailout: Module is not an ECMAScript module"
],
"depth": 0
}
],
"origins": [
{
"module": "",
"moduleIdentifier": "",
"moduleName": "",
"loc": "main",
"request": "./src"
}
]
}
],
"modules": [
{
"type": "module",
"moduleType": "javascript/auto",
"layer": null,
"size": 1033,
"sizes": {
"javascript": 1033
},
"built": true,
"codeGenerated": true,
"buildTimeExecuted": false,
"cached": false,
"identifier": "/Users/xcc/Documents/xcc/tl/app/aep/src/index.js",
"name": "./src/index.js",
"nameForCondition": "/Users/xcc/Documents/xcc/tl/app/aep/src/index.js",
"index": 0,
"preOrderIndex": 0,
"index2": 0,
"postOrderIndex": 0,
"cacheable": true,
"optional": false,
"orphan": false,
"issuer": null,
"issuerName": null,
"issuerPath": null,
"failed": true,
"errors": 1,
"warnings": 0,
"id": 138,
"issuerId": null,
"chunks": [179],
"assets": [],
"reasons": [
{
"moduleIdentifier": null,
"module": null,
"moduleName": null,
"resolvedModuleIdentifier": null,
"resolvedModule": null,
"type": "entry",
"active": true,
"explanation": "",
"userRequest": "./src",
"loc": "main",
"moduleId": null,
"resolvedModuleId": null
}
],
"usedExports": [],
"providedExports": null,
"optimizationBailout": [
"ModuleConcatenation bailout: Module is not an ECMAScript module"
],
"depth": 0
}
],
"entrypoints": {
"main": {
"name": "main",
"chunks": [179],
"assets": [
{
"name": "main.js"
}
],
"filteredAssets": 0,
"assetsSize": null,
"auxiliaryAssets": [],
"filteredAuxiliaryAssets": 0,
"auxiliaryAssetsSize": 0,
"children": {},
"childAssets": {},
"isOverSizeLimit": false
}
},
"namedChunkGroups": {
"main": {
"name": "main",
"chunks": [179],
"assets": [
{
"name": "main.js"
}
],
"filteredAssets": 0,
"assetsSize": null,
"auxiliaryAssets": [],
"filteredAuxiliaryAssets": 0,
"auxiliaryAssetsSize": 0,
"children": {},
"childAssets": {},
"isOverSizeLimit": false
}
},
"errors": [
{
"moduleIdentifier": "/Users/xcc/Documents/xcc/tl/app/aep/src/index.js",
"moduleName": "./src/index.js",
"loc": "32:2",
"message": "Module parse failed: Unexpected token (32:2)\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n| \n| ReactDOM.render(\n> <ConfigProvider locale={zhCN}>\n| <Provider store={store}>\n| <App />",
"moduleId": 138,
"moduleTrace": [],
"stack": "ModuleParseError: Module parse failed: Unexpected token (32:2)\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n| \n| ReactDOM.render(\n> <ConfigProvider locale={zhCN}>\n| <Provider store={store}>\n| <App />\n at handleParseError (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/webpack/lib/NormalModule.js:923:19)\n at /Users/xcc/Documents/xcc/tl/app/aep/node_modules/webpack/lib/NormalModule.js:1025:5\n at processResult (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/webpack/lib/NormalModule.js:745:11)\n at /Users/xcc/Documents/xcc/tl/app/aep/node_modules/webpack/lib/NormalModule.js:809:5\n at /Users/xcc/Documents/xcc/tl/app/aep/node_modules/loader-runner/lib/LoaderRunner.js:406:3\n at iterateNormalLoaders (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/loader-runner/lib/LoaderRunner.js:232:10)\n at Array.<anonymous> (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/loader-runner/lib/LoaderRunner.js:223:4)\n at runCallbacks (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)\n at /Users/xcc/Documents/xcc/tl/app/aep/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4\n at /Users/xcc/Documents/xcc/tl/app/aep/node_modules/graceful-fs/graceful-fs.js:123:16"
}
],
"errorsCount": 1,
"warnings": [
{
"message": "configuration\nThe 'mode' option has not been set, webpack will fallback to 'production' for this value.\nSet 'mode' option to 'development' or 'production' to enable defaults for each environment.\nYou can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/",
"stack": "NoModeWarning: configuration\nThe 'mode' option has not been set, webpack will fallback to 'production' for this value.\nSet 'mode' option to 'development' or 'production' to enable defaults for each environment.\nYou can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/\n at /Users/xcc/Documents/xcc/tl/app/aep/node_modules/webpack/lib/WarnNoModeSetPlugin.js:20:30\n at Hook.eval [as call] (eval at create (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:21:1)\n at Hook.CALL_DELEGATE [as _call] (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/tapable/lib/Hook.js:14:14)\n at Compiler.newCompilation (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/webpack/lib/Compiler.js:1033:30)\n at /Users/xcc/Documents/xcc/tl/app/aep/node_modules/webpack/lib/Compiler.js:1076:29\n at Hook.eval [as callAsync] (eval at create (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)\n at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/tapable/lib/Hook.js:18:14)\n at Compiler.compile (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/webpack/lib/Compiler.js:1071:28)\n at /Users/xcc/Documents/xcc/tl/app/aep/node_modules/webpack/lib/Compiler.js:498:12\n at Compiler.readRecords (/Users/xcc/Documents/xcc/tl/app/aep/node_modules/webpack/lib/Compiler.js:910:11)"
}
],
"warningsCount": 1,
"children": []
}
Copy the codeFile field interpretation:
- Assets: List of compiled products
- Chunks: a list of chunks generated during the build process, containing an array containing the chunk name, size, and dependency graph
- Modules: All modules touched by this run. The array contains the size, chunk of the module, analysis time, and construction reason of the module
- Entrypoints: Entry list
- NamedChunkGroups: named versions of chunks, which are more concise than chunks
- Errors: All error messages that occur during the build process
- Warnings: All warnings that occur during the build process
Visual Analysis tool Webpack Analysis
Generate analysis views of modules, files and so on from stats.json file
Effect:
Experience location: Webpack Analysis
Webpack Visualizer/ Webpack-Visualizer-Plugin for online analysis tools
By dragging in the generated stats.json file, you can see the references to the packaged module
Effect:
Webpack Visualizer Experience address: Webpack-Visualizer
Webpack-visualizer-plugin project address: Github
Package volume and dependency analysis Webpack Bundle Analyzer
After construction, module distribution diagram of TreemAP form can be generated
- You can view the size of relevant JS files in the module distribution diagram
- Whether the module is repackaged
- Whether unnecessary modules are packaged (devtool, webpack-dev-server, etc.)
- .
Effect:
Usage:
webpack.dev.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') module.exports = { ... , plugins: [ new BundleAnalyzerPlugin() ] }Copy the codeProject address: Github
Command line visualization Webpack-Dashboard
Use to beautify your build output, including execution time, dependency file size information, execution status, etc
Effect:
Usage:
webpack.dev.config.js
const DashboardPlugin = require('webpack-dashboard/plugin') module.exports = { ... , plugins: [ new DashboardPlugin() ] }Copy the codepackage.json
"Script ": {"start": "webpack serve --open --config webpack.dev.config.js"} // change to "script": {"start": "webpack-dashboard -- webpack serve --open --config webpack.dev.config.js" }Copy the codeProject address: Github
Notify webpack-build-notifier when the build is complete
Used to push completion information to you when the build is complete without having to wait for the build result
Effect:
Usage:
webpack.dev.config.js
const WebpackBuildNotifierPlugin = require('webpack-build-notifier') module.exports = { ... Plugins: [new WebpackBuildNotifierPlugin ({title: "adult education side," logo: path. Resolve (". / img/favicon. PNG "), suppressSuccess: true }) ] }Copy the codeProject address: Github
Build progress-bar-webpack-plugin
Plugins for showing build progress
Effect:
Usage:
webpack.dev.config.js
const ProgressBarPlugin = require('progress-bar-webpack-plugin') module.exports = { ... , plugins: [ new ProgressBarPlugin() ] }Copy the codeProject address: Github
Build the Progress bar WebPackBar
For Webpack build progress and build analysis:
- Build a real-time progress bar
- Multi-concurrent build
- Advanced Build analysis
- .
Effect:
Usage:
webpack.dev.config.js
const webpackbar = require('webpackbar') module.exports = { ... , plugins: [ new webpackbar() ] }Copy the code