https://github.com/web-infra-dev/webpack-inspector

Devtool for webpack.
https://github.com/web-infra-dev/webpack-inspector

Last synced: 3 months ago
JSON representation

Devtool for webpack.

• Host: GitHub
• URL: https://github.com/web-infra-dev/webpack-inspector
• Owner: web-infra-dev
• Created: 2022-08-09T06:50:54.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-10T08:37:16.000Z (about 2 years ago)
• Last Synced: 2024-10-31T11:36:41.721Z (4 months ago)
• Language: TypeScript
• Homepage:
• Size: 626 KB
• Stars: 96
• Watchers: 5
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

![devtool-0.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4deb18a92b8245caa1eeba9c0843db71~tplv-k3u1fbpfcp-watermark.image?)

![devtool-1.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8f994016e3e4a22be5339c43a0817fc~tplv-k3u1fbpfcp-watermark.image?)

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

![devtool-3.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a617af7a430d4100ab177bb2da614b1c~tplv-k3u1fbpfcp-watermark.image?)

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

![devtool-4.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/52c85f669cf843d1901868363cf04843~tplv-k3u1fbpfcp-watermark.image?)

4. View the final config of webpack.

![devtool-5.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/328cfdff36034cd1bbf1e14c40a30772~tplv-k3u1fbpfcp-watermark.image?)

5. View the webpack output chunk.

![devtool-6.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/000a454c179d451fb8156ae8f9bcc434~tplv-k3u1fbpfcp-watermark.image?)

## Usage

### 1. Install

```bash

pnpm install @modern-js/inspector-webpack-plugin -D

```

### 2. Use in webpack

```ts

// webpack.config.ts

import { InspectorWebpackPlugin } from '@modern-js/inspector-webpack-plugin'

// Add plugin

export default {

  plugins: [new InspectorWebpackPlugin()]

}

```

### 3. Custom Options

```ts

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`](https://github.com/antfu/vite-plugin-inspect).At the same time, webpack loader in the inspect got inspired by [`speed-measure-webpack-plugin`](https://github.com/stephencookdev/speed-measure-webpack-plugin).Thanks for them.