webpack-plugin-chokidar v1.0.1

webpack-plugin-chokidar

let webpack monitor changes in files that are not in the dependency graph.

Docs

English | 中文

Foreword

Those who have used the umi framework must be impressed with its conventional routing function. You only need to create a new file in the page folder without any configuration, and you can jump directly to this page. The implementation principle is actually very simple. You only need to monitor the addition and deletion of files in the page folder, and run the script to update the routing table files.

But as we all know, Webpack can only monitor the changes of files in the file dependency graph. When a file that is not in the dependency graph is created, modified, or deleted, there is no way to monitor it.

webpack-plugin-chokidar is a tool that allows Webpack to monitor changes in files that are not in the dependency graph. In the callback function, you can execute your automation script. It integrates chokidar, redesigns its API, and only needs to pass in a configuration when using it.

Install

npm i webpack-plugin-chokidar -D

Config

You can check the type file and chokidar document to see more detailed configuration

Demo

new WebPackPluginChokidar({
  chokidarConfigList: [
    {
      file: '../src/pages/**/index.tsx',
      opt: { persistent: true, ignoreInitial: true },
      actions: {
        on: {
          add: ({ compiler, compilation, watcher }, path) => {
            console.log(`File ${path} has been added`)
          },
        },
      },
    },
  ],
})