Webpack 4处理格式错误JSON时进程退出问题求助

我之前也碰到过一模一样的问题！Webpack 4默认处理JSON文件时，如果遇到格式错误，确实会直接触发致命错误导致进程退出，尤其是搭配browser-sync这类第三方dev-server时，不像处理JS语法错误那样能保持进程存活等待修复。这里有几个经过验证的解决方案：

方案1：正确集成Webpack Watch模式与Browser-Sync #

问题的核心可能是你没有让Webpack在watch模式下运行，而是一次性编译。当Webpack以watch模式启动时，即使遇到JSON解析错误，它只会在控制台输出错误信息，不会退出进程，修复文件后会自动重新编译。

调整你的启动脚本和集成方式：

1. 先让Webpack在watch模式下编译文件：

webpack --watch --mode development

2. 再启动Browser-Sync，监听输出目录的变化：

browser-sync start --files 'dist/**/*' --server 'dist'

或者更优雅的方式是使用browser-sync-webpack-plugin插件让两者联动：

• 安装插件：

npm install browser-sync-webpack-plugin --save-dev

• 在Webpack配置中添加：

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new BrowserSyncPlugin({
      files: ['./src/**/*'],
      server: {
        baseDir: './dist'
      }
    })
  ]
};

这样启动Webpack时，它会自动启动Browser-Sync，遇到JSON错误时保持进程存活，修复后自动刷新页面。

方案2：自定义JSON Loader捕获解析错误 #

如果不想调整dev-server的集成方式，可以写一个简单的自定义loader来捕获JSON解析错误，避免Webpack进程崩溃：

1. 在项目根目录创建json-error-catcher-loader.js：

module.exports = function(source) {
  try {
    // 先尝试解析JSON，验证格式
    JSON.parse(source);
    return source;
  } catch (err) {
    // 输出错误信息到控制台
    console.error(`⚠️ JSON文件解析错误 (${this.resourcePath}):`);
    console.error(err.message);
    // 返回一个占位的空JSON，让Webpack继续编译
    return '{}';
  }
};

2. 在Webpack配置中覆盖默认的JSON处理规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.json$/,
        use: ['./json-error-catcher-loader'],
        type: 'javascript/auto' // 告诉Webpack不要用默认的JSON解析器
      }
    ]
  }
};

这个loader会在解析JSON前先做语法检查，遇到错误时输出提示并返回一个空对象，确保Webpack进程不会退出，你修复JSON格式后，Webpack会自动重新编译。

方案3：使用Webpack Dev Server替代Browser-Sync #

如果没有特别依赖Browser-Sync的功能，直接使用Webpack内置的Dev Server是最省心的方案。它默认在watch模式下运行，遇到任何编译错误都会保持进程存活，并且支持热更新：

• 修改Webpack配置：

module.exports = {
  // ...其他配置
  devServer: {
    contentBase: './dist',
    hot: true,
    open: true
  }
};

• 启动命令：

webpack-dev-server --mode development

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