<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Here is the code I am using :</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const mode = process.env.NODE_ENV;

const BundleAnalyzerPlugin      = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const OptimizeCSSAssetsPlugin   = require('optimize-css-assets-webpack-plugin');
const TerserPlugin              = require('terser-webpack-plugin');
const CompressionPlugin         = require('compression-webpack-plugin');

const md5 = require('md5');

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  css: { 
    extract: mode === 'production'
  },

  productionSourceMap: mode !== 'production',

  chainWebpack: config =&gt; {
    // remove the prefetch plugin
    config.plugins.delete('prefetch')

    if(mode === 'production') config.module.rules.delete('eslint');

    config.plugin('CompressionPlugin').use(CompressionPlugin);
    
  },

  configureWebpack: {
    // Define the asset compression properties
    optimization: {

        minimizer: [
          new OptimizeCSSAssetsPlugin({
              cssProcessorPluginOptions: {
                  preset: [ 'default', { discardComments: { removeAll: true } } ]
              }
          }),

          new TerserPlugin({
              parallel: true,
              extractComments: {
                  condition: true,
                  filename: (fileData) =&gt; {
                      return `${fileData.filename}.LICENSE.txt${fileData.query}`;
                  },
                  banner: () =&gt; ''
              }
          })
        ],


        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/].*\.js$/,
                    chunks: 'all',
                    name: module =&gt; {

                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                        return md5(`npm.${packageName}`)
                            .substring(0, 8);

                    }
                }
            }
        }
    },
    plugins: [
      // new BundleAnalyzerPlugin()
    ]
  }


}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">mode</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">BundleAnalyzerPlugin</span>      <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'webpack-bundle-analyzer'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">BundleAnalyzerPlugin</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">OptimizeCSSAssetsPlugin</span>   <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'optimize-css-assets-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">TerserPlugin</span>              <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'terser-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">CompressionPlugin</span>         <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'compression-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">md5</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'md5'</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">publicPath</span>: <span class="pl-s">'/'</span><span class="pl-kos">,</span>
  <span class="pl-c1">outputDir</span>: <span class="pl-s">'dist'</span><span class="pl-kos">,</span>
  <span class="pl-c1">css</span>: <span class="pl-kos">{</span> 
    <span class="pl-c1">extract</span>: <span class="pl-s1">mode</span> <span class="pl-c1">===</span> <span class="pl-s">'production'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c1">productionSourceMap</span>: <span class="pl-s1">mode</span> <span class="pl-c1">!==</span> <span class="pl-s">'production'</span><span class="pl-kos">,</span>

  <span class="pl-en">chainWebpack</span>: <span class="pl-s1">config</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-c">// remove the prefetch plugin</span>
    <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">plugins</span><span class="pl-kos">.</span><span class="pl-en">delete</span><span class="pl-kos">(</span><span class="pl-s">'prefetch'</span><span class="pl-kos">)</span>

    <span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-s1">mode</span> <span class="pl-c1">===</span> <span class="pl-s">'production'</span><span class="pl-kos">)</span> <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">module</span><span class="pl-kos">.</span><span class="pl-c1">rules</span><span class="pl-kos">.</span><span class="pl-en">delete</span><span class="pl-kos">(</span><span class="pl-s">'eslint'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-en">plugin</span><span class="pl-kos">(</span><span class="pl-s">'CompressionPlugin'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span><span class="pl-v">CompressionPlugin</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">configureWebpack</span>: <span class="pl-kos">{</span>
    <span class="pl-c">// Define the asset compression properties</span>
    <span class="pl-c1">optimization</span>: <span class="pl-kos">{</span>

        <span class="pl-c1">minimizer</span>: <span class="pl-kos">[</span>
          <span class="pl-k">new</span> <span class="pl-v">OptimizeCSSAssetsPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
              <span class="pl-c1">cssProcessorPluginOptions</span>: <span class="pl-kos">{</span>
                  <span class="pl-c1">preset</span>: <span class="pl-kos">[</span> <span class="pl-s">'default'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">discardComments</span>: <span class="pl-kos">{</span> <span class="pl-c1">removeAll</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>
          <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>

          <span class="pl-k">new</span> <span class="pl-v">TerserPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
              <span class="pl-c1">parallel</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
              <span class="pl-c1">extractComments</span>: <span class="pl-kos">{</span>
                  <span class="pl-c1">condition</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                  <span class="pl-en">filename</span>: <span class="pl-kos">(</span><span class="pl-s1">fileData</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                      <span class="pl-k">return</span> <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">fileData</span><span class="pl-kos">.</span><span class="pl-c1">filename</span><span class="pl-kos">}</span></span>.LICENSE.txt<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">fileData</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span>
                  <span class="pl-kos">}</span><span class="pl-kos">,</span>
                  <span class="pl-en">banner</span>: <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s">''</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">splitChunks</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">chunks</span>: <span class="pl-s">'all'</span><span class="pl-kos">,</span>
            <span class="pl-c1">maxInitialRequests</span>: <span class="pl-v">Infinity</span><span class="pl-kos">,</span>
            <span class="pl-c1">minSize</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
            <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">vendors</span>: <span class="pl-kos">{</span>
                    <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">[</span><span class="pl-cce">\\</span>/<span class="pl-kos">]</span>node_modules<span class="pl-kos">[</span><span class="pl-cce">\\</span>/<span class="pl-kos">]</span>.<span class="pl-c1">*</span><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-c1">chunks</span>: <span class="pl-s">'all'</span><span class="pl-kos">,</span>
                    <span class="pl-en">name</span>: <span class="pl-smi">module</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

                        <span class="pl-k">const</span> <span class="pl-s1">packageName</span> <span class="pl-c1">=</span> <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">context</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><span class="pl-kos">[</span><span class="pl-cce">\\</span>/<span class="pl-kos">]</span>node_modules<span class="pl-kos">[</span><span class="pl-cce">\\</span>/<span class="pl-kos">]</span><span class="pl-kos">(</span>.<span class="pl-c1">*</span>?<span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-cce">\\</span>/<span class="pl-kos">]</span><span class="pl-c1">|</span><span class="pl-cce">$</span><span class="pl-kos">)</span><span class="pl-c1">/</span></span><span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

                        <span class="pl-k">return</span> <span class="pl-s1">md5</span><span class="pl-kos">(</span><span class="pl-s">`npm.<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">packageName</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span>
                            <span class="pl-kos">.</span><span class="pl-en">substring</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">8</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-kos">,</span>
    <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
      <span class="pl-c">// new BundleAnalyzerPlugin()</span>
    <span class="pl-kos">]</span>
  <span class="pl-kos">}</span>


<span class="pl-kos">}</span></pre></div>
<p dir="auto">This is what I have in <code class="notranslate">package.json</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;serve&quot;: &quot;rimraf -rf ./node_modules/.cache/vue-loader &amp;&amp; node --max_old_space_size=4096 ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve --open&quot;,"><pre class="notranslate"><code class="notranslate">"serve": "rimraf -rf ./node_modules/.cache/vue-loader &amp;&amp; node --max_old_space_size=4096 ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve --open",
</code></pre></div>
<p dir="auto">After running <code class="notranslate">npm run serve</code>, all looks fine. If I hit <code class="notranslate">ctrl+s</code> to save something I changed, it builts again, but exits from terminal with the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const removedModules = records.chunkModuleIds[chunkId].filter(
                                                                                                                       ^
TypeError: Cannot read property 'filter' of undefined
"><pre class="notranslate"><code class="notranslate">const removedModules = records.chunkModuleIds[chunkId].filter(
                                                                                                                       ^
TypeError: Cannot read property 'filter' of undefined

</code></pre></div>
<p dir="auto">The file that this happens is <code class="notranslate">HotModuleReplacementPlugin.js:272</code>.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Expected behaviour is that after saving file , it should rebuilt without any errors.</p>
<p dir="auto">I'd appreciate if you give me the direction of why this happens. Maybe this is solely related to vue-cli doing something in the nutshell.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  Whatever vue-cli-service is using. Vue-cli version is <code class="notranslate">^4.4.6"</code><br>
Node.js version: 12.14.1<br>
Operating System:  MacOs<br>
Additional tools:</p>
<p dir="auto"><strong>Bug</strong></p>
<p dir="auto">HMR is currently throwing the following exception, and crashing the webpack dev server:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="error: Uncaught exception, exiting api server. Error TypeError: Cannot read property 'filter' of undefined
   at Compilation.&lt;anonymous&gt; (.../node_modules/webpack/lib/HotModuleReplacementPlugin.js:115:43)
   at Array.forEach (native)
   at Compilation.&lt;anonymous&gt; (.../node_modules/webpack/lib/HotModuleReplacementPlugin.js:111:36)
   at Compilation.applyPlugins1 (.../node_modules/webpack/node_modules/tapable/lib/Tapable.js:75:14)
   at sealPart2 (.../node_modules/webpack/lib/Compilation.js:622:9)
   at Compilation.applyPluginsAsyncSeries (.../node_modules/webpack/node_modules/tapable/lib/Tapable.js:131:46)
   at Compilation.seal (.../node_modules/webpack/lib/Compilation.js:575:8)
   at .../node_modules/webpack/lib/Compiler.js:488:16
   at .../node_modules/webpack/node_modules/tapable/lib/Tapable.js:225:11
   at _addModuleChain (.../node_modules/webpack/lib/Compilation.js:477:11)
   at processModuleDependencies.err (.../node_modules/webpack/lib/Compilation.js:448:13)
   at _combinedTickCallback (internal/process/next_tick.js:73:7)
   at process._tickDomainCallback (internal/process/next_tick.js:128:9)"><pre class="notranslate"><code class="notranslate">error: Uncaught exception, exiting api server. Error TypeError: Cannot read property 'filter' of undefined
   at Compilation.&lt;anonymous&gt; (.../node_modules/webpack/lib/HotModuleReplacementPlugin.js:115:43)
   at Array.forEach (native)
   at Compilation.&lt;anonymous&gt; (.../node_modules/webpack/lib/HotModuleReplacementPlugin.js:111:36)
   at Compilation.applyPlugins1 (.../node_modules/webpack/node_modules/tapable/lib/Tapable.js:75:14)
   at sealPart2 (.../node_modules/webpack/lib/Compilation.js:622:9)
   at Compilation.applyPluginsAsyncSeries (.../node_modules/webpack/node_modules/tapable/lib/Tapable.js:131:46)
   at Compilation.seal (.../node_modules/webpack/lib/Compilation.js:575:8)
   at .../node_modules/webpack/lib/Compiler.js:488:16
   at .../node_modules/webpack/node_modules/tapable/lib/Tapable.js:225:11
   at _addModuleChain (.../node_modules/webpack/lib/Compilation.js:477:11)
   at processModuleDependencies.err (.../node_modules/webpack/lib/Compilation.js:448:13)
   at _combinedTickCallback (internal/process/next_tick.js:73:7)
   at process._tickDomainCallback (internal/process/next_tick.js:128:9)
</code></pre></div>
<p dir="auto">This corresponds to this line:<br>
<code class="notranslate">var newModules = currentChunk.modules.filter(...</code></p>
<p dir="auto">Webpack is webpack@2.4.1, I'll post my full wepack config at the end.</p>


<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>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong></p>
<p dir="auto">webpack@2.4.1, full config:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  cache: true,
  // debug: true,
  devtool: 'inline-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: ['node_modules'],
    alias: {
      &quot;ag-grid-root&quot;: path.resolve(rootDir, 'node_modules/ag-grid/dist')
    }
  },
  node: {
    fs: &quot;empty&quot;
  },
  // noInfo: true, // set to false to see a list of every file being bundled.
  entry: [
    // must be first entry to properly set public path
    './src/webpack-public-path',
    'react-hot-loader/patch',
    'webpack-hot-middleware/client?reload=true',
    './src/index'
  ],
  target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
  output: {
    path: path.join(rootDir, 'dist', 'client'), // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new StatsPlugin('stats.json'),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
      __DEV__: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({     // Create HTML file that includes references to bundled CSS and JS.
      template: 'src/templates/index.ejs',
      filename: 'index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      inject: true
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        minimize: false,
        debug: true,
        noInfo: true,
        context: '/',
        postcss: [
          autoprefixer(),
        ]
       }
    })
  ],
  resolveLoader: {
    moduleExtensions: ['-loader']
  },
  module: {
    rules: [
      {test: /\.jsx?$/, exclude: /node_modules/, use: {loader: 'babel', options: {cacheDirectory: true}}},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: {loader: 'url', options: {limit: 10000, mimetype: 'application/font-woff'}}},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: {loader: 'url', options: {limit: 10000, mimetype: 'application/octet-stream'}}},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: {loader: 'url', options: {limit: 10000, mimetype: 'image/svg+xml'}}},
      {test: /\.(jpe?g|png|gif)$/i, use: {loader: 'file', options: {name: '[name].[ext]'}}},
      {test: /\.ico$/, use: {loader: 'file', options: {name: '[name].[ext]'}}},
      {
        test: /\.(css|scss)$/,
        use: [
          { loader: 'style' },
          { loader: 'css', query: { sourceMap: true } },
          { loader: 'postcss' },
          { loader: 'sass', options: { includePaths: [stylesDir], sourceMap: true } }
        ]
      }
    ]
  }
}"><pre class="notranslate"><code class="notranslate">{
  cache: true,
  // debug: true,
  devtool: 'inline-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: ['node_modules'],
    alias: {
      "ag-grid-root": path.resolve(rootDir, 'node_modules/ag-grid/dist')
    }
  },
  node: {
    fs: "empty"
  },
  // noInfo: true, // set to false to see a list of every file being bundled.
  entry: [
    // must be first entry to properly set public path
    './src/webpack-public-path',
    'react-hot-loader/patch',
    'webpack-hot-middleware/client?reload=true',
    './src/index'
  ],
  target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
  output: {
    path: path.join(rootDir, 'dist', 'client'), // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new StatsPlugin('stats.json'),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
      __DEV__: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({     // Create HTML file that includes references to bundled CSS and JS.
      template: 'src/templates/index.ejs',
      filename: 'index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      inject: true
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        minimize: false,
        debug: true,
        noInfo: true,
        context: '/',
        postcss: [
          autoprefixer(),
        ]
       }
    })
  ],
  resolveLoader: {
    moduleExtensions: ['-loader']
  },
  module: {
    rules: [
      {test: /\.jsx?$/, exclude: /node_modules/, use: {loader: 'babel', options: {cacheDirectory: true}}},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: {loader: 'url', options: {limit: 10000, mimetype: 'application/font-woff'}}},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: {loader: 'url', options: {limit: 10000, mimetype: 'application/octet-stream'}}},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: {loader: 'url', options: {limit: 10000, mimetype: 'image/svg+xml'}}},
      {test: /\.(jpe?g|png|gif)$/i, use: {loader: 'file', options: {name: '[name].[ext]'}}},
      {test: /\.ico$/, use: {loader: 'file', options: {name: '[name].[ext]'}}},
      {
        test: /\.(css|scss)$/,
        use: [
          { loader: 'style' },
          { loader: 'css', query: { sourceMap: true } },
          { loader: 'postcss' },
          { loader: 'sass', options: { includePaths: [stylesDir], sourceMap: true } }
        ]
      }
    ]
  }
}
</code></pre></div>