使用svg-to-json-webpack-plugin时Webpack Dev Server陷入无限刷新循环

It sounds like you’re hitting a super common watch-mode pitfall—where the plugin’s output file is triggering Webpack Dev Server’s file watcher over and over, creating an endless compile loop. Let’s break down the likely causes and actionable fixes:

1. Verify if the generated JSON is in Webpack’s watched directory #

The #1 culprit here is usually that the plugin is dumping the JSON file into a folder Webpack is configured to watch (like your src directory or entry file root). Every time the plugin generates the JSON, Webpack detects the file change and triggers a rebuild… which makes the plugin regenerate the file again, and so on.

Fix:

• Reconfigure the plugin to output JSON to a directory outside Webpack’s watch scope—think ./temp/icons or ./dist/icons (just make sure dist isn’t being watched).
• Add the output directory to Webpack’s ignored watch paths in your webpack.config.js:

  module.exports = {
    // ... other config
    devServer: {
      watchOptions: {
        ignored: ['**/temp/icons/**', '**/dist/icons/**']
      }
    }
  };
  

2. Enable caching or change detection in the plugin #

Some plugins will regenerate output files on every compile, even if your source SVGs haven’t changed. This constant file rewrite triggers the watch loop nonstop.

Fix:

• Check the plugin’s docs for cache-related flags (like cache, onlyUpdateOnChange, or similar). If available, flip this on so the plugin only regenerates JSON when your source SVGs actually change.
• If the plugin lacks built-in caching, you can add a simple content check: wrap the plugin logic (or build a tiny custom plugin) that compares the new JSON content with the existing file’s content, and only writes if they’re different.

3. Disable the plugin in development mode #

Since you already have a working manual implementation for controlling SVG props, you might not even need this plugin during development. Stick with your custom setup for dev, and enable the plugin only for production builds.

Fix:

• Conditionally include the plugin in your webpack.config.js based on environment:

  const SvgToJsonWebpackPlugin = require('svg-to-json-webpack-plugin');
  
  module.exports = (env) => {
    const isProduction = env.production === true;
    return {
      // ... other config
      plugins: [
        // ... other plugins
        ...(isProduction ? [new SvgToJsonWebpackPlugin(/* your config */)] : [])
      ]
    };
  };
  

4. Debug the file change trigger #

To confirm exactly what’s causing the loop:

• Run Webpack Dev Server with verbose logging (webpack serve --verbose) to see which file change is triggering each rebuild.
• Check the modified time of the generated JSON before and after a rebuild. If it updates even when SVGs haven’t changed, the plugin is unnecessarily rewriting the file.

If none of these fixes pan out, you could also wrap your existing manual SVG-to-JSON logic into a custom Webpack plugin. This gives you full control over when files are generated and avoids third-party plugin quirks entirely.

内容的提问来源于stack exchange，提问作者Zach