Webpack often uses development experience/analytics related tools

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 code

Project 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 code

stats.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 code

File 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 code

Project 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 code

package.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 code

Project 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 code

Project 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 code

Project 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

Webpack often uses development experience/analytics related tools

Find the unused resource unused-webpack-plugin in the project

Collecting Statistics

Visual Analysis tool Webpack Analysis

Webpack Visualizer/ Webpack-Visualizer-Plugin for online analysis tools

Package volume and dependency analysis Webpack Bundle Analyzer

Command line visualization Webpack-Dashboard

Notify webpack-build-notifier when the build is complete

Build progress-bar-webpack-plugin

Build the Progress bar WebPackBar

Related Posts

Image watermarking, file to picture, picture to file, HTML2Canvas screen capture function

In-depth JS foundation: from memory mechanism, parsing mechanism to execution mechanism (long text warning)

I found some interesting code while fishing