Webpack Inspector
Introduction
Webpack dev tools to make performance analysis, error investigation and loader development more convenient. Provide the following functions:
- All modules and intermediate compilation results passed by the loaders.
- The time consuming of all loaders and the number of files they compile.
- Module dependency graph structure visualization.(Think of performance, the function will be closed when the number of modules is greater than 100)
- View the final config of webpack.
- View the webpack output chunk.
Usage
1. Install
pnpm install @modern-js/inspector-webpack-plugin -D
2. Use in webpack
// webpack.config.ts
import { InspectorWebpackPlugin } from '@modern-js/inspector-webpack-plugin'
// Add plugin
export default {
plugins: [new InspectorWebpackPlugin()]
}
3. Custom Options
export default {
plugins: [new InspectorWebpackPlugin({
// Custom the port of devtool page, which is 3333 by default.
port: 3456,
// Config the module that need to be ignored, ignore will not work by default.
ignorePattern: /node_modules/
})]
}
Credits
The UI interface implementation of inspector is modified from existing project vite-plugin-inspect.At the same time, webpack loader in the inspect got inspired by speed-measure-webpack-plugin.Thanks for them.
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
18 Aug 19, 2022
4 Jun 24, 2022
6 Nov 4, 2022
8 Dec 21, 2022
8 Aug 23, 2022
10 Nov 25, 2022
10 Sep 28, 2022