<p dir="auto">So at <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/brigade/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/brigade">@brigade</a> our build times are pretty slow, and I can't seem to figure out why this is. We use Babel, SCSS+autoprefixer+css-loader+style-loader, react+react-hot-loader, CommonsChunkPlugin, DefinePlugin, webpack-dev-server, devtool:'eval-cheap-module-source-map', and that's pretty much it. I posted a typical version of our config at the end.</p>
<p dir="auto">I initially started investigating the incremental build time, since I run into that most often. These are the things I tried that didn't help:</p>
<ul dir="auto">
<li>Don't use context.</li>
<li>Use <code class="notranslate">include</code> in config to remove large directories from path (we already used <code class="notranslate">exclude</code> in some places, so this didn't help)</li>
<li>Scoping react-hot-loader only to components directory.</li>
<li>Remove hash from css filenames.</li>
</ul>
<p dir="auto">Here are some things that <em>did</em> help:</p>
<ul dir="auto">
<li>Disabling source maps altogether (large effect on emit and creating chunk assets).</li>
<li>Pulling more modules into the common chunk (mostly affected emit, but this was trumped by disabling source maps altogether; no compound effect).</li>
</ul>
<p dir="auto">Most of the time for incremental builds was still in <code class="notranslate">build modules</code> though, I could only affect <code class="notranslate">create chunk assets</code> and <code class="notranslate">emit</code> this way. Then I tried to tackle the initial build, assuming there must be some sort of more structural flaw in our codebase. First I reset the codebase back to the way it was before I played with incremental builds. Then my methodology was to then try something, then run webpack 5 times and save that total time, and also save the stats from one of the runs to get some insight. I didn't reset the code base in between builds, but tried to compound improvements to get the time down as much as possible. Here's the result of that investigation:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Baseline:
43748ms build modules
110ms seal
144ms optimize
244ms hashing
3621ms create chunk assets
12ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
1203ms emit
./profile.sh  244.24s user 10.78s system 99% cpu 4:16.90 total

Removing load postfixes (see https://github.com/elastic/kibana/blob/c9c9e565e6f744ba3fbc959cd0ac81a7b28a476d/src/optimize/BaseOptimizer.js and https://github.com/webpack/webpack/issues/24):
43254ms build modules
94ms seal
131ms optimize
223ms hashing
3310ms create chunk assets
10ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
1331ms emit
./profile.sh  243.28s user 10.63s system 99% cpu 4:15.42 total
NO DIFFERENCE

More messing around with resolve params:
41777ms build modules
104ms seal
143ms optimize
243ms hashing
3010ms create chunk assets
12ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
1620ms emit
./profile.sh  239.57s user 10.91s system 96% cpu 4:20.16 total
NO DIFFERENCE

Reducing number of modulesDirectories to 5:
36639ms build modules
125ms seal
144ms optimize
255ms hashing
3878ms create chunk assets
17ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
857ms emit
./profile.sh  212.82s user 9.79s system 92% cpu 4:00.07 total
HELPS MAYBE?

Reducing number of modulesDirectories to 3:
42700ms build modules
92ms seal
246ms optimize
174ms hashing
2650ms create chunk assets
14ms additional chunk assets
0ms optimize chunk assets
0ms optimize assets
1036ms emit
./profile.sh  218.80s user 9.69s system 97% cpu 3:53.51 total
HELPS MAYBE?

Include components_loader.js regex in webpack config:
47551ms build modules
69ms seal
90ms optimize
209ms hashing
2509ms create chunk assets
8ms additional chunk assets
1ms optimize chunk assets
0ms optimize assets
1475ms emit
./profile.sh  221.16s user 9.72s system 96% cpu 3:58.70 total
NO DIFFERENCE?

Disable SCSS source maps:
30114ms build modules
102ms seal
124ms optimize
205ms hashing
2897ms create chunk assets
14ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
860ms emit
./profile.sh  196.68s user 8.60s system 100% cpu 3:25.27 total
SOME DIFFERENCE! (same as with the incremental build)

Disable source maps altogether:
37089ms build modules
105ms seal
126ms optimize
239ms hashing
467ms create chunk assets
13ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
510ms emit
./profile.sh  198.85s user 9.73s system 97% cpu 3:34.86 total
NO DIFFERENCE?

Extracting more code into a common chunk:
35174ms build modules
81ms seal
168ms optimize
91ms hashing
195ms create chunk assets
16ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
337ms emit
./profile.sh  182.06s user 8.63s system 97% cpu 3:16.42 total
HELPS MAYBE?

De-duplicate core-js:
35300ms build modules
116ms seal
217ms optimize
123ms hashing
234ms create chunk assets
34ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
270ms emit
./profile.sh  189.18s user 8.86s system 98% cpu 3:21.99 total
NO DIFFERENCE?

Use React.js binary:
40170ms build modules
116ms seal
222ms optimize
122ms hashing
270ms create chunk assets
13ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
302ms emit
./profile.sh  185.07s user 8.53s system 99% cpu 3:15.09 total
NO DIFFERENCE?"><pre class="notranslate"><code class="notranslate">Baseline:
43748ms build modules
110ms seal
144ms optimize
244ms hashing
3621ms create chunk assets
12ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
1203ms emit
./profile.sh  244.24s user 10.78s system 99% cpu 4:16.90 total

Removing load postfixes (see https://github.com/elastic/kibana/blob/c9c9e565e6f744ba3fbc959cd0ac81a7b28a476d/src/optimize/BaseOptimizer.js and https://github.com/webpack/webpack/issues/24):
43254ms build modules
94ms seal
131ms optimize
223ms hashing
3310ms create chunk assets
10ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
1331ms emit
./profile.sh  243.28s user 10.63s system 99% cpu 4:15.42 total
NO DIFFERENCE

More messing around with resolve params:
41777ms build modules
104ms seal
143ms optimize
243ms hashing
3010ms create chunk assets
12ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
1620ms emit
./profile.sh  239.57s user 10.91s system 96% cpu 4:20.16 total
NO DIFFERENCE

Reducing number of modulesDirectories to 5:
36639ms build modules
125ms seal
144ms optimize
255ms hashing
3878ms create chunk assets
17ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
857ms emit
./profile.sh  212.82s user 9.79s system 92% cpu 4:00.07 total
HELPS MAYBE?

Reducing number of modulesDirectories to 3:
42700ms build modules
92ms seal
246ms optimize
174ms hashing
2650ms create chunk assets
14ms additional chunk assets
0ms optimize chunk assets
0ms optimize assets
1036ms emit
./profile.sh  218.80s user 9.69s system 97% cpu 3:53.51 total
HELPS MAYBE?

Include components_loader.js regex in webpack config:
47551ms build modules
69ms seal
90ms optimize
209ms hashing
2509ms create chunk assets
8ms additional chunk assets
1ms optimize chunk assets
0ms optimize assets
1475ms emit
./profile.sh  221.16s user 9.72s system 96% cpu 3:58.70 total
NO DIFFERENCE?

Disable SCSS source maps:
30114ms build modules
102ms seal
124ms optimize
205ms hashing
2897ms create chunk assets
14ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
860ms emit
./profile.sh  196.68s user 8.60s system 100% cpu 3:25.27 total
SOME DIFFERENCE! (same as with the incremental build)

Disable source maps altogether:
37089ms build modules
105ms seal
126ms optimize
239ms hashing
467ms create chunk assets
13ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
510ms emit
./profile.sh  198.85s user 9.73s system 97% cpu 3:34.86 total
NO DIFFERENCE?

Extracting more code into a common chunk:
35174ms build modules
81ms seal
168ms optimize
91ms hashing
195ms create chunk assets
16ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
337ms emit
./profile.sh  182.06s user 8.63s system 97% cpu 3:16.42 total
HELPS MAYBE?

De-duplicate core-js:
35300ms build modules
116ms seal
217ms optimize
123ms hashing
234ms create chunk assets
34ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
270ms emit
./profile.sh  189.18s user 8.86s system 98% cpu 3:21.99 total
NO DIFFERENCE?

Use React.js binary:
40170ms build modules
116ms seal
222ms optimize
122ms hashing
270ms create chunk assets
13ms additional chunk assets
0ms optimize chunk assets
1ms optimize assets
302ms emit
./profile.sh  185.07s user 8.53s system 99% cpu 3:15.09 total
NO DIFFERENCE?
</code></pre></div>
<p dir="auto">So the only new thing I tried that helped was reducing the number of modulesDirectories.</p>
<p dir="auto">Some more information. Here is what a typical incremental build looks like (with hot loading enabled), after all the changes above:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[webpack] webpack: bundle is now INVALID.
3657ms build modules  
83ms seal
1247ms optimize
147ms hashing
276ms create chunk assets
156ms additional chunk assets
0ms optimize chunk assets 
0ms optimize assets 
196ms emit
[webpack] Hash: b91dce65a3b67a9d69d9
[webpack] Version: webpack 1.12.2
[webpack] Time: 5805ms
[webpack]                                Asset      Size  Chunks             Chunk Names
[webpack]                     intl_polyfill.js   1.17 MB       4  [emitted]  intl_polyfill
[webpack]                   jquery_fallback.js   1.26 MB       5  [emitted]  jquery_fallback
[webpack]                            vendor.js   6.09 MB       8  [emitted]  vendor
[webpack] 8.a5cd34b7ba7171bb6548.hot-update.js    2.4 kB       8  [emitted]  vendor
[webpack] a5cd34b7ba7171bb6548.hot-update.json  36 bytes          [emitted]  
[webpack] chunk    {0} activity_map.js (activity_map) 188 kB {8}
[webpack]      + 7 hidden modules
[webpack] chunk    {1} admin.js (admin) 141 kB {2}
[webpack]      + 36 hidden modules
[webpack] chunk    {2} application.js (application) 69.2 kB {8}
[webpack]      + 24 hidden modules
[webpack] chunk    {3} diffux_ci.js (diffux_ci) 295 kB {8}
[webpack]  [1829] ./app/assets/components -diffux\.jsx$ 5.12 kB {3} [built]
[webpack]        ... -&gt; factory:3ms building:0ms
[webpack]      + 116 hidden modules
[webpack] chunk    {4} intl_polyfill.js (intl_polyfill) 1.12 MB [rendered]
[webpack]      + 74 hidden modules
[webpack] chunk    {5} jquery_fallback.js (jquery_fallback) 1.21 MB [rendered]
[webpack]      + 69 hidden modules
[webpack] chunk    {6} partners.js (partners) 543 kB {2}
[webpack]      + 199 hidden modules
[webpack] chunk    {7} specs.js (specs) 1.67 MB {8}
[webpack]  [2201] ./app/assets/components -test\.jsx$ 8.84 kB {7} [built]
[webpack]        ... -&gt; factory:9ms building:0ms
[webpack]      + 358 hidden modules
[webpack] chunk    {8} vendor.js, 8.a5cd34b7ba7171bb6548.hot-update.js (vendor) 6.08 MB [rendered]
[webpack]   [584] ./app/assets/components/CardButtons/index.jsx 2.35 kB {8} [built]
[webpack]        ... -&gt; factory:1ms building:0ms dependencies:1ms
[webpack]      + 1768 hidden modules
[webpack] webpack: bundle is now VALID."><pre class="notranslate"><code class="notranslate">[webpack] webpack: bundle is now INVALID.
3657ms build modules  
83ms seal
1247ms optimize
147ms hashing
276ms create chunk assets
156ms additional chunk assets
0ms optimize chunk assets 
0ms optimize assets 
196ms emit
[webpack] Hash: b91dce65a3b67a9d69d9
[webpack] Version: webpack 1.12.2
[webpack] Time: 5805ms
[webpack]                                Asset      Size  Chunks             Chunk Names
[webpack]                     intl_polyfill.js   1.17 MB       4  [emitted]  intl_polyfill
[webpack]                   jquery_fallback.js   1.26 MB       5  [emitted]  jquery_fallback
[webpack]                            vendor.js   6.09 MB       8  [emitted]  vendor
[webpack] 8.a5cd34b7ba7171bb6548.hot-update.js    2.4 kB       8  [emitted]  vendor
[webpack] a5cd34b7ba7171bb6548.hot-update.json  36 bytes          [emitted]  
[webpack] chunk    {0} activity_map.js (activity_map) 188 kB {8}
[webpack]      + 7 hidden modules
[webpack] chunk    {1} admin.js (admin) 141 kB {2}
[webpack]      + 36 hidden modules
[webpack] chunk    {2} application.js (application) 69.2 kB {8}
[webpack]      + 24 hidden modules
[webpack] chunk    {3} diffux_ci.js (diffux_ci) 295 kB {8}
[webpack]  [1829] ./app/assets/components -diffux\.jsx$ 5.12 kB {3} [built]
[webpack]        ... -&gt; factory:3ms building:0ms
[webpack]      + 116 hidden modules
[webpack] chunk    {4} intl_polyfill.js (intl_polyfill) 1.12 MB [rendered]
[webpack]      + 74 hidden modules
[webpack] chunk    {5} jquery_fallback.js (jquery_fallback) 1.21 MB [rendered]
[webpack]      + 69 hidden modules
[webpack] chunk    {6} partners.js (partners) 543 kB {2}
[webpack]      + 199 hidden modules
[webpack] chunk    {7} specs.js (specs) 1.67 MB {8}
[webpack]  [2201] ./app/assets/components -test\.jsx$ 8.84 kB {7} [built]
[webpack]        ... -&gt; factory:9ms building:0ms
[webpack]      + 358 hidden modules
[webpack] chunk    {8} vendor.js, 8.a5cd34b7ba7171bb6548.hot-update.js (vendor) 6.08 MB [rendered]
[webpack]   [584] ./app/assets/components/CardButtons/index.jsx 2.35 kB {8} [built]
[webpack]        ... -&gt; factory:1ms building:0ms dependencies:1ms
[webpack]      + 1768 hidden modules
[webpack] webpack: bundle is now VALID.
</code></pre></div>
<p dir="auto">This is a simplified but representative version of webpack.config.js that I ended up with:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="require('babel-core/polyfill');
var webpack = require('webpack');

module.exports = {
  entry: {
    activity_map: './app/assets/_activity_map.js',
    admin: './app/assets/_admin.js',
    application: [
      'webpack-dev-server/client?http://localhost:8080',
      './app/assets/_application.js'
    ],
    intl_polyfill: './app/assets/_intl_polyfill.js',
    jquery_fallback: './app/assets/_jquery_fallback.js',
    partners: './app/assets/_partners.js',
    vendor: './app/assets/_vendor.js',
    specs: [
      'webpack-dev-server/client?http://localhost:8080',
      './app/assets/spec/_specs.js'
    ],
    diffux_ci: './app/assets/spec/_diffux_ci.js',
  },

  output: {
    path: __dirname + '/public/assets',
    filename: '[name].js',
    publicPath: 'http://localhost:8080/assets'
  },

  resolve: {
    modulesDirectories: [
      'app/assets',
      'vendor/assets/bower_components',
      'node_modules',
    ],
    extensions: [
      '.jsx',
      '.js',
      '',
    ],
    loaderExtensions: ['.js', ''],
    loaderPostfixes: [''],
    unsafeCache: true,
    postfixes: [''],
    alias: {
      'core-js': __dirname + '/node_modules/babel-runtime/node_modules/core-js',
      'react$': __dirname + '/node_modules/react/dist/react-with-addons.js',
    },
  },

  // Disable source maps for now
  // devtool: 'eval-cheap-module-source-map',

  plugins: [
    new webpack.DefinePlugin({
      // Some definitions here
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'application',
      minChunks: 2,
      chunks: ['admin', 'partners']
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: 2,
      chunks: ['application', 'diffux_ci', 'specs', 'activity_map'],
    }),
  ],

  externals: {
    jquery:  'jQuery',
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css?localIdentName=[path][name]--[local]--[hash:base64:10]!autoprefixer',
        include: [
          __dirname + '/app/assets',
          __dirname + '/node_modules/normalize.css',
        ],
      },
      {
        test: /\.scss$/,
        loader: 'style!css?localIdentName=[path][name]--[local]--[hash:base64:10]!autoprefixer!sass',
        include: __dirname + '/app/assets',
      },
      {
        test: /\.jsx?$/,
        loaders: [
          'babel-loader?cacheDirectory',
          'react-hot'
        ],
        exclude: [/node_modules/, /bower_components/, /support\/fixtures/],
        include: __dirname + '/app/assets',
      },
      {
        test: /app\/assets\/components\/(.*?)(?:\/index)?\.jsx/,
        loader: __dirname + '/app/assets/components_loader',
        include: __dirname + '/app/assets/components',
      },
      {
        test: /raven-js/,
        loaders: ['imports?this=&gt;window'],
        include: __dirname + '/node_modules/raven-js',
      },
      {
        test: /\.(gif|jpe?g|png|svg)$/,
        loader: 'file-loader',
        include: __dirname + '/app/assets',
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
        include: __dirname + '/app/assets',
      }
    ],
    noParse: [
      /acorn\/dist\/acorn\.js$/,
      /underscore\/underscore\.js$/,
      /react-with-addons\.js$/,
    ]
  },

  profile: true,
  stats: {
    hash: true,
    version: true,
    timings: true,
    assets: true,
    chunks: true,
    modules: true,
    reasons: true,
    children: true,
    source: false,
    errors: true,
    errorDetails: true,
    warnings: true,
    publicPath: true
  },
};"><pre class="notranslate"><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'babel-core/polyfill'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">webpack</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'webpack'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">entry</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">activity_map</span>: <span class="pl-s">'./app/assets/_activity_map.js'</span><span class="pl-kos">,</span>
    <span class="pl-c1">admin</span>: <span class="pl-s">'./app/assets/_admin.js'</span><span class="pl-kos">,</span>
    <span class="pl-c1">application</span>: <span class="pl-kos">[</span>
      <span class="pl-s">'webpack-dev-server/client?http://localhost:8080'</span><span class="pl-kos">,</span>
      <span class="pl-s">'./app/assets/_application.js'</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">intl_polyfill</span>: <span class="pl-s">'./app/assets/_intl_polyfill.js'</span><span class="pl-kos">,</span>
    <span class="pl-c1">jquery_fallback</span>: <span class="pl-s">'./app/assets/_jquery_fallback.js'</span><span class="pl-kos">,</span>
    <span class="pl-c1">partners</span>: <span class="pl-s">'./app/assets/_partners.js'</span><span class="pl-kos">,</span>
    <span class="pl-c1">vendor</span>: <span class="pl-s">'./app/assets/_vendor.js'</span><span class="pl-kos">,</span>
    <span class="pl-c1">specs</span>: <span class="pl-kos">[</span>
      <span class="pl-s">'webpack-dev-server/client?http://localhost:8080'</span><span class="pl-kos">,</span>
      <span class="pl-s">'./app/assets/spec/_specs.js'</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">diffux_ci</span>: <span class="pl-s">'./app/assets/spec/_diffux_ci.js'</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">path</span>: <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/public/assets'</span><span class="pl-kos">,</span>
    <span class="pl-c1">filename</span>: <span class="pl-s">'[name].js'</span><span class="pl-kos">,</span>
    <span class="pl-c1">publicPath</span>: <span class="pl-s">'http://localhost:8080/assets'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">modulesDirectories</span>: <span class="pl-kos">[</span>
      <span class="pl-s">'app/assets'</span><span class="pl-kos">,</span>
      <span class="pl-s">'vendor/assets/bower_components'</span><span class="pl-kos">,</span>
      <span class="pl-s">'node_modules'</span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">extensions</span>: <span class="pl-kos">[</span>
      <span class="pl-s">'.jsx'</span><span class="pl-kos">,</span>
      <span class="pl-s">'.js'</span><span class="pl-kos">,</span>
      <span class="pl-s">''</span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">loaderExtensions</span>: <span class="pl-kos">[</span><span class="pl-s">'.js'</span><span class="pl-kos">,</span> <span class="pl-s">''</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">loaderPostfixes</span>: <span class="pl-kos">[</span><span class="pl-s">''</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">unsafeCache</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">postfixes</span>: <span class="pl-kos">[</span><span class="pl-s">''</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">alias</span>: <span class="pl-kos">{</span>
      <span class="pl-s">'core-js'</span>: <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/node_modules/babel-runtime/node_modules/core-js'</span><span class="pl-kos">,</span>
      <span class="pl-s">'react$'</span>: <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/node_modules/react/dist/react-with-addons.js'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c">// Disable source maps for now</span>
  <span class="pl-c">// devtool: 'eval-cheap-module-source-map',</span>

  <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">DefinePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c">// Some definitions here</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">name</span>: <span class="pl-s">'application'</span><span class="pl-kos">,</span>
      <span class="pl-c1">minChunks</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span>
      <span class="pl-c1">chunks</span>: <span class="pl-kos">[</span><span class="pl-s">'admin'</span><span class="pl-kos">,</span> <span class="pl-s">'partners'</span><span class="pl-kos">]</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">name</span>: <span class="pl-s">'vendor'</span><span class="pl-kos">,</span>
      <span class="pl-c1">minChunks</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span>
      <span class="pl-c1">chunks</span>: <span class="pl-kos">[</span><span class="pl-s">'application'</span><span class="pl-kos">,</span> <span class="pl-s">'diffux_ci'</span><span class="pl-kos">,</span> <span class="pl-s">'specs'</span><span class="pl-kos">,</span> <span class="pl-s">'activity_map'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>

  <span class="pl-c1">externals</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">jquery</span>:  <span class="pl-s">'jQuery'</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c1">module</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">loaders</span>: <span class="pl-kos">[</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>css<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">loader</span>: <span class="pl-s">'style!css?localIdentName=[path][name]--[local]--[hash:base64:10]!autoprefixer'</span><span class="pl-kos">,</span>
        <span class="pl-c1">include</span>: <span class="pl-kos">[</span>
          <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/app/assets'</span><span class="pl-kos">,</span>
          <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/node_modules/normalize.css'</span><span class="pl-kos">,</span>
        <span class="pl-kos">]</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>scss<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">loader</span>: <span class="pl-s">'style!css?localIdentName=[path][name]--[local]--[hash:base64:10]!autoprefixer!sass'</span><span class="pl-kos">,</span>
        <span class="pl-c1">include</span>: <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/app/assets'</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>jsx?<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">loaders</span>: <span class="pl-kos">[</span>
          <span class="pl-s">'babel-loader?cacheDirectory'</span><span class="pl-kos">,</span>
          <span class="pl-s">'react-hot'</span>
        <span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">exclude</span>: <span class="pl-kos">[</span><span class="pl-pds"><span class="pl-c1">/</span>node_modules<span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span>bower_components<span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-pds"><span class="pl-c1">/</span>support<span class="pl-cce">\/</span>fixtures<span class="pl-c1">/</span></span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">include</span>: <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/app/assets'</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span>app<span class="pl-cce">\/</span>assets<span class="pl-cce">\/</span>components<span class="pl-cce">\/</span><span class="pl-kos">(</span>.<span class="pl-c1">*</span>?<span class="pl-kos">)</span><span class="pl-kos">(?:</span><span class="pl-cce">\/</span>index<span class="pl-kos">)</span>?<span class="pl-cce">\.</span>jsx<span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">loader</span>: <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/app/assets/components_loader'</span><span class="pl-kos">,</span>
        <span class="pl-c1">include</span>: <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/app/assets/components'</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span>raven-js<span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">loaders</span>: <span class="pl-kos">[</span><span class="pl-s">'imports?this=&gt;window'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">include</span>: <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/node_modules/raven-js'</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>gif<span class="pl-c1">|</span>jpe?g<span class="pl-c1">|</span>png<span class="pl-c1">|</span>svg<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">loader</span>: <span class="pl-s">'file-loader'</span><span class="pl-kos">,</span>
        <span class="pl-c1">include</span>: <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/app/assets'</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>json<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">loader</span>: <span class="pl-s">'json-loader'</span><span class="pl-kos">,</span>
        <span class="pl-c1">include</span>: <span class="pl-s1">__dirname</span> <span class="pl-c1">+</span> <span class="pl-s">'/app/assets'</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">noParse</span>: <span class="pl-kos">[</span>
      <span class="pl-pds"><span class="pl-c1">/</span>acorn<span class="pl-cce">\/</span>dist<span class="pl-cce">\/</span>acorn<span class="pl-cce">\.</span>js<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
      <span class="pl-pds"><span class="pl-c1">/</span>underscore<span class="pl-cce">\/</span>underscore<span class="pl-cce">\.</span>js<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
      <span class="pl-pds"><span class="pl-c1">/</span>react-with-addons<span class="pl-cce">\.</span>js<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
    <span class="pl-kos">]</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c1">profile</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">stats</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">hash</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">version</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">timings</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">assets</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">chunks</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">modules</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">reasons</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">children</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">source</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-c1">errors</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">errorDetails</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">warnings</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">publicPath</span>: <span class="pl-c1">true</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The components_loader is just something small that we added for exposing components so we can more easily include them in our style guide:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = function(content) {
  if (this.cacheable) {
    this.cacheable();
  }

  const matches = this.resourcePath.match(/components\/(.*?)(?:\/index)?\.jsx/);
  if (!matches) {
    return content;
  }

  return content + '\n' +
    'window.ReactComponents = window.ReactComponents || {};\n' +
    &quot;ReactComponents['&quot; + matches[1] + &quot;'] = module.exports;\n&quot;;
};"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">content</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">cacheable</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">cacheable</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">const</span> <span class="pl-s1">matches</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">resourcePath</span><span class="pl-kos">.</span><span class="pl-en">match</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>components<span class="pl-cce">\/</span><span class="pl-kos">(</span>.<span class="pl-c1">*</span>?<span class="pl-kos">)</span><span class="pl-kos">(?:</span><span class="pl-cce">\/</span>index<span class="pl-kos">)</span>?<span class="pl-cce">\.</span>jsx<span class="pl-c1">/</span></span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">matches</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s1">content</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">return</span> <span class="pl-s1">content</span> <span class="pl-c1">+</span> <span class="pl-s">'\n'</span> <span class="pl-c1">+</span>
    <span class="pl-s">'window.ReactComponents = window.ReactComponents || {};\n'</span> <span class="pl-c1">+</span>
    <span class="pl-s">"ReactComponents['"</span> <span class="pl-c1">+</span> <span class="pl-s1">matches</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span> <span class="pl-c1">+</span> <span class="pl-s">"'] = module.exports;\n"</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The full stats.json can be found here: <a href="https://gist.github.com/d8feb05513656472dbf5">https://gist.github.com/d8feb05513656472dbf5</a></p>
<p dir="auto">I really hope someone can help me with this, I've been stuck on this issue for two days now. Maybe if we find a solution it would help others as well, because I think our React/Babel/SCSS setup is pretty common. Thanks!!</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:   5.72.1<br>
Node.js version:  v14.19.1<br>
Operating System: mac<br>
Additional tools: no</p>
<p dir="auto">My problem is the same as his <a href="https://stackoverflow.com/questions/65278463/watching-mode-in-webpack-node-api/65279119" rel="nofollow">https://stackoverflow.com/questions/65278463/watching-mode-in-webpack-node-api/65279119</a></p>
<p dir="auto">let compiler = webpack(webpackConfig);<br>
compiler.watch({}, (err, stats) =&gt; {<br>
if (err || stats.hasErrors()) console.error(err);<br>
console.log('Webpack refresh...');<br>
});<br>
I configured it so that launching webPack would generate an error message，ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.。Watch is fine if I don't use compiler.watch, but I need to use the compiler.watch method。</p>