Webpack 4 + Browsersync配置报错ConcurrentCompilationError求助

嘿，这个错误我之前配置Webpack 4的时候也踩过坑，给你拆解下原因和解决办法：

问题根源 #

你看到的ConcurrentCompilationError本质是两个Webpack编译实例在同时运行：

• 你手动执行了webpack --watch，启动了一个监听文件变化的编译进程；
• 而browsersync-webpack-plugin内部的webpack-dev-middleware又悄悄启动了另一个Webpack watch实例。Webpack 4对同一实例的并发编译做了严格限制，所以直接抛出了这个错误。

另外提一句，旧版本的browsersync-webpack-plugin对Webpack 4的兼容性确实拉胯，这也是大概率的诱因。

具体解决方案 #

1. 先把插件升级到兼容Webpack 4的版本

先确保你用的是适配Webpack 4的插件版本，直接安装最新版就行：

npm install browsersync-webpack-plugin@latest --save-dev
# 用yarn的话
yarn add browsersync-webpack-plugin@latest --dev

2. 二选一：调整配置避免双重启动

根据你的使用习惯选下面其中一种方案：

方案A：让插件全权负责Webpack Watch和Browsersync

别再手动敲webpack --watch了，让browsersync-webpack-plugin同时管理编译和浏览器同步。修改你webpack.config.js里的BrowserSyncPlugin配置：

new BrowserSyncPlugin(
  // Browsersync 基础配置
  {
    proxy: target, // 你的开发服务器地址（比如本地WordPress的地址）
    files: [
      '**/*.php', // 监听后端文件变化（如果是PHP项目的话）
      `${config.paths.dist}/**/*.css`,
      `${config.paths.dist}/**/*.js`
    ],
    open: false, // 可选：要不要自动打开浏览器
    notify: false // 可选：关掉Browsersync右下角的通知弹窗
  },
  // 插件和Webpack的集成设置
  {
    reload: false, // 让Webpack编译完通知Browsersync重载
    name: 'bs-webpack-plugin',
    injectCss: true // CSS变化自动注入，不用刷新整个页面
  }
)

之后直接运行webpack命令就好，插件会自动启动Webpack的watch模式和Browsersync服务。

方案B：自己手动跑Webpack Watch，让Browsersync只盯编译好的文件

如果你就喜欢手动敲webpack --watch，那得禁用插件内部的Webpack相关功能，让它只监听已经编译好的文件：

new BrowserSyncPlugin(
  {
    proxy: target,
    files: [
      '**/*.php',
      `${config.paths.dist}/**/*.css`,
      `${config.paths.dist}/**/*.js`
    ]
  },
  {
    watch: false, // 禁用插件自带的Webpack watch
    devMiddleware: null, // 关掉webpack-dev-middleware，不让它启动额外编译
    injectCss: true
  }
)

之后先启动webpack --watch保持编译，再跑Webpack构建命令就行（也可以写个npm脚本把两个命令串起来）。

3. 额外检查：别让其他插件搞事情

看看你的webpack.config.js里有没有其他插件会启动额外的Webpack实例，目前你配置里的CleanWebpackPlugin、MiniCssExtractPlugin这些都没问题，不用操心。

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