title: ConcurrentCompilationError: You ran Webpack twice
body: <p>Need some help in setting up Webpack 4 + Browsersync.
  I get following error when trying to <code>webpack --watch</code> but can't figure is it problem my configuration or is the browsersync-webpack-plugin not updated to support v4.</p>
  
  <pre><code>ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
      at Compiler.watch (/wp-content/themes/theme-name/node_modules/webpack/lib/Compiler.js:142:36)
      at Object.startWatch (/wp-content/themes/theme-name/node_modules/webpack-dev-middleware/lib/Shared.js:176:29)
      at Shared (/wp-content/themes/theme-name/node_modules/webpack-dev-middleware/lib/Shared.js:238:8)
      at module.exports (/wp-content/themes/theme-name/node_modules/webpack-dev-middleware/middleware.js:22:15)
      at BrowserSyncWebpackPlugin.setupWebpackDevMiddleware (/wp-content/themes/theme-name/node_modules/browsersync-webpack-plugin/index.js:162:34)
      at BrowserSyncWebpackPlugin.setup (/wp-content/themes/theme-name/node_modules/browsersync-webpack-plugin/index.js:151:12)
      at BrowserSyncWebpackPlugin.start (/wp-content/themes/theme-name/node_modules/browsersync-webpack-plugin/index.js:130:11)
      at Object.onceWrapper (events.js:317:30)
      at emitTwo (events.js:126:13)
      at BrowserSyncWebpackPlugin.emit (events.js:214:7)
      at AsyncSeriesHook.eval (eval at create (/wp-content/themes/theme-name/node_modules/tapable/lib/HookCodeFactory.js:24:12), &lt;anonymous&gt;:18:1)
      at AsyncSeriesHook.lazyCompileHook (/wp-content/themes/theme-name/node_modules/tapable/lib/Hook.js:35:21)
      at Watching._done (/wp-content/themes/theme-name/node_modules/webpack/lib/Watching.js:99:28)
      at compiler.emitRecords.err (/wp-content/themes/theme-name/node_modules/webpack/lib/Watching.js:73:19)
      at Compiler.emitRecords (/wp-content/themes/theme-name/node_modules/webpack/lib/Compiler.js:315:39)
      at compiler.emitAssets.err (/wp-content/themes/theme-name/node_modules/webpack/lib/Watching.js:54:20)
      at hooks.afterEmit.callAsync.err (/wp-content/themes/theme-name/node_modules/webpack/lib/Compiler.js:301:14)
      at AsyncSeriesHook.eval [as callAsync] (eval at create (/wp-content/themes/theme-name/node_modules/tapable/lib/HookCodeFactory.js:24:12), &lt;anonymous&gt;:6:1)
      at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/wp-content/themes/theme-name/node_modules/tapable/lib/Hook.js:35:21)
      at asyncLib.forEach.err (/wp-content/themes/theme-name/node_modules/webpack/lib/Compiler.js:298:27)
      at done (/wp-content/themes/theme-name/node_modules/neo-async/async.js:2854:11)
      at /wp-content/themes/theme-name/node_modules/neo-async/async.js:2805:7
      at /wp-content/themes/theme-name/node_modules/graceful-fs/graceful-fs.js:43:10
      at FSReqWrap.oncomplete (fs.js:135:15)
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>const path = require('path');
  const config = require('./config');
  
  const webpack = require('webpack');
  const merge = require('webpack-merge');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const BrowserSyncPlugin = require('browsersync-webpack-plugin');
  
  const target = process.env.DEVURL || config.devUrl;
  const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
  
  /**
   * Modules
   */
  const loadModules = {
    rules: [
    {
      enforce: 'pre',
      test: /\.js?$/,
      include: config.paths.assets,
      use: 'eslint',
    },
    {
      enforce: 'pre',
      test: /\.(js|s?[ca]ss)$/,
      include: config.paths.assets,
      loader: 'import-glob',
    },
    {
      test: /\.js$/,
      exclude: [/(node_modules|lib|vendor)/],
      include: config.paths.assets,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.css$/,
      include: config.paths.assets,
      use: [
        'cache',
        config.env.production ? MiniCssExtractPlugin.loader: 'style-loader',
        { loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
        {
          loader: 'postcss', options: {
            config: { path: __dirname, ctx: config },
            sourceMap: config.enabled.sourceMaps,
          },
        },
      ],
    },
    {
      test: /\.scss$/,
      include: config.paths.assets,
      use: [
        config.env.production ? MiniCssExtractPlugin.loader: 'style-loader',
        { loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
        {
          loader: 'postcss', options: {
            config: { path: __dirname, ctx: config },
            sourceMap: config.enabled.sourceMaps,
          },
        },
        { loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps } },
        'sass',
        'import-glob',
      ],
    },
    {
      test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
      use: [
        {
          loader: 'file',
          options: {
            name: `[path]${assetsFilenames}.[ext]`,
            publicPath: '../',
          },
        }
      ],
    }],
  }
  
  
  /**
   * Plugins
   **/
  const loadPlugins = [
  
    new CleanWebpackPlugin([config.paths.dist], {
      root: config.paths.root,
      verbose: false,
    }),
  
    new MiniCssExtractPlugin({
      filename: `styles/${assetsFilenames}.css`,
    }),
  
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify( config.mode )
      }
    }),
  
    new FriendlyErrorsWebpackPlugin(),
  ];
  
  
  /**
   * Final config
   */
  let webpackConfig = {
    context: config.paths.assets,
    entry: config.entry,
    mode: config.mode,
    devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
    output: {
      path: config.paths.dist,
      publicPath: config.publicPath,
      filename: `scripts/${assetsFilenames}.js`,
    },
  
    stats: false,
  
    module: loadModules,
  
    resolve: {
      modules: [
        config.paths.assets,
        'node_modules',
      ],
      enforceExtension: false,
    },
  
    resolveLoader: {
      moduleExtensions: ['-loader'],
    },
  
    plugins: loadPlugins,
  }
  
  /**
   * Watch
   */
  if (config.enabled.watcher) {
  
    webpackConfig.stats = false;
    webpackConfig.devtool =  '#cheap-module-source-map';
  
    webpackConfig.plugins.push(
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new BrowserSyncPlugin({
        target,
        open: config.open,
        proxyUrl: config.proxyUrl,
        watch: config.watch,
        delay: 500,
      }),
    );
  }
  
  /**
   * Export final config
   */
  module.exports = webpackConfig;
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "dependencies": {
      "autoprefixer": "^8.4.1",
      "babel-cli": "^6.26.0",
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.4",
      "babel-plugin-transform-runtime": "^6.23.0",
      "babel-preset-env": "^1.6.1",
      "browser-sync": "^2.24.4",
      "browser-sync-webpack-plugin": "^2.2.2",
      "browsersync-webpack-plugin": "^0.6.0",
      "cache-loader": "^1.2.2",
      "clean-webpack-plugin": "^0.1.19",
      "css-loader": "^0.28.11",
      "cssnano": "^3.10.0",
      "eslint": "^4.19.1",
      "eslint-loader": "^2.0.0",
      "eslint-plugin-import": "^2.11.0",
      "file-loader": "^1.1.11",
      "friendly-errors-webpack-plugin": "^1.7.0",
      "imagemin-mozjpeg": "^7.0.0",
      "imagemin-webpack-plugin": "^2.1.1",
      "import-glob": "^1.5.0",
      "mini-css-extract-plugin": "^0.4.0",
      "node-sass": "^4.9.0",
      "postcss-loader": "^2.1.4",
      "postcss-safe-parser": "^3.0.1",
      "resolve-url-loader": "^2.3.0",
      "rimraf": "^2.6.2",
      "sass-loader": "^7.0.1",
      "style-loader": "^0.21.0",
      "url-loader": "^1.0.1",
      "webpack": "^4.7.0",
      "webpack-assets-manifest": "^3.0.1",
      "webpack-cli": "^2.1.3",
      "webpack-hot-middleware": "^2.22.1",
      "webpack-merge": "^4.1.2",
      "yargs": "^11.0.0"
    },
    "devDependencies": {
      "breakpoint-sass": "^2.7.1",
      "normalize.css": "^8.0.0",
      "parsleyjs": "^2.8.1",
      "susy": "^3.0.5"
    }
  }
  </code></pre>