Webpack Inspector

Introduction

Webpack dev tools to make performance analysis, error investigation and loader development more convenient. Provide the following functions:

1. All modules and intermediate compilation results passed by the loaders.

2. The time consuming of all loaders and the number of files they compile.

3. Module dependency graph structure visualization.(Think of performance, the function will be closed when the number of modules is greater than 100)

4. View the final config of webpack.

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