<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
Webpack builds have started failing in our automated deployments as of the 5.45.0 release a few hours ago</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">In our project. ag-grid-community and GraphQL dependencies fail to compile (stack trace and webpack config file below).</p>
<p dir="auto">Our project is closed source unfortunately but here is what I suspect are repro steps:</p>
<ol dir="auto">
<li>Initialize an NPM project.  Install ag-grid-community and/or GraphQL</li>
<li>Add an index.js which depends on these files in a way that requires them to be packed</li>
<li>execute webpack</li>
</ol>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
Webpack should pack the files without error similar to the behavior of 5.44.0</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.45.0<br>
Node.js version: 12.18.1<br>
Operating System: MACOS/Linux/Windows all reproduce<br>
Additional tools: Terser Plugin, Preamble Plugin</p>
<blockquote>
<blockquote>
<p dir="auto">Webpack Config: <a href="https://github.com/pdemro/webpack-config-5.45.0-suspected-bug/blob/main/webpack.config.js">https://github.com/pdemro/webpack-config-5.45.0-suspected-bug/blob/main/webpack.config.js</a></p>
</blockquote>
</blockquote>
<blockquote>
<blockquote>
<p dir="auto">Stack Trace:</p>
</blockquote>
</blockquote>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Entrypoint index 3.99 MiB = runtime-bundle.js 7.57 KiB vendor-bundle.js 2.14 MiB index-bundle.js 1.84 MiB
runtime modules 3.63 KiB 8 modules
modules by path ./src/ 1.43 MiB
  javascript modules 1.31 MiB 319 modules
  json modules 55.4 KiB 13 modules
  asset modules 64.5 KiB
    modules by path ./src/images/*.png 16.6 KiB 8 modules
    3 modules
modules by path ./node_modules/ 4.17 MiB
  modules by path ./node_modules/graphql/ 41.3 KiB 9 modules
  modules by path ./node_modules/highcharts/ 346 KiB 7 modules
  modules by path ./node_modules/graphql-request/ 16.6 KiB 4 modules
  modules by path ./node_modules/extract-files/public/*.js 2.06 KiB 4 modules
  modules by path ./node_modules/css-loader/dist/runtime/*.js 2.38 KiB
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/getUrl.js 830 bytes [built] [code generated]

ERROR in ./node_modules/ag-grid-community/dist/ag-grid-community.cjs.js 1530:19
Module parse failed: Unexpected token (1530:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         modules.forEach(function (module) { return ModuleRegistry.register(module, moduleBased); });
|     };
&gt;     ModuleRegistry.assertRegistered = function (moduleName, reason) {
|         if (this.isRegistered(moduleName)) {
|             return true;
 @ ./src/components/agGridPopout/ag-grid-popout.ts 16:28-56
 @ ./src/ sync (^.?|\.[^d]|[^.]d|[^.][^d])\.(j|t)sx?$ ./components/agGridPopout/ag-grid-popout.ts
 @ ./src/index.ts 5:12-81

ERROR in ./node_modules/graphql/index.mjs 38:2
Module parse failed: Unexpected token (38:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| , SchemaMetaFieldDef, TypeMetaFieldDef, TypeNameMetaFieldDef // Predicates
| , isSchema, isDirective, isType, isScalarType, isObjectType, isInterfaceType, isUnionType, isEnumType, isInputObjectType, isListType, isNonNullType, isInputType, isOutputType, isLeafType, isCompositeType, isAbstractType, isWrappingType, isNullableType, isNamedType, isRequiredArgument, isRequiredInputField, isSpecifiedScalarType, isIntrospectionType, isSpecifiedDirective // Assertions
&gt; , assertSchema, assertDirective, assertType, assertScalarType, assertObjectType, assertInterfaceType, assertUnionType, assertEnumType, assertInputObjectType, assertListType, assertNonNullType, assertInputType, assertOutputType, assertLeafType, assertCompositeType, assertAbstractType, assertWrappingType, assertNullableType, assertNamedType // Un-modifiers
| , getNullableType, getNamedType // Validate GraphQL schema.
| , validateSchema, assertValidSchema } from &quot;./type/index.mjs&quot;;
 @ ./node_modules/graphql-tag/lib/index.js 2:0-32 65:21-26
 @ ./src/generated/graphql.ts 7:38-60
 @ ./src/ sync (^.?|\.[^d]|[^.]d|[^.][^d])\.(j|t)sx?$ ./generated/graphql.ts
 @ ./src/index.ts 5:12-81

webpack 5.45.0 compiled with 2 errors in 31329 ms"><pre class="notranslate"><code class="notranslate">Entrypoint index 3.99 MiB = runtime-bundle.js 7.57 KiB vendor-bundle.js 2.14 MiB index-bundle.js 1.84 MiB
runtime modules 3.63 KiB 8 modules
modules by path ./src/ 1.43 MiB
  javascript modules 1.31 MiB 319 modules
  json modules 55.4 KiB 13 modules
  asset modules 64.5 KiB
    modules by path ./src/images/*.png 16.6 KiB 8 modules
    3 modules
modules by path ./node_modules/ 4.17 MiB
  modules by path ./node_modules/graphql/ 41.3 KiB 9 modules
  modules by path ./node_modules/highcharts/ 346 KiB 7 modules
  modules by path ./node_modules/graphql-request/ 16.6 KiB 4 modules
  modules by path ./node_modules/extract-files/public/*.js 2.06 KiB 4 modules
  modules by path ./node_modules/css-loader/dist/runtime/*.js 2.38 KiB
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/getUrl.js 830 bytes [built] [code generated]

ERROR in ./node_modules/ag-grid-community/dist/ag-grid-community.cjs.js 1530:19
Module parse failed: Unexpected token (1530:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         modules.forEach(function (module) { return ModuleRegistry.register(module, moduleBased); });
|     };
&gt;     ModuleRegistry.assertRegistered = function (moduleName, reason) {
|         if (this.isRegistered(moduleName)) {
|             return true;
 @ ./src/components/agGridPopout/ag-grid-popout.ts 16:28-56
 @ ./src/ sync (^.?|\.[^d]|[^.]d|[^.][^d])\.(j|t)sx?$ ./components/agGridPopout/ag-grid-popout.ts
 @ ./src/index.ts 5:12-81

ERROR in ./node_modules/graphql/index.mjs 38:2
Module parse failed: Unexpected token (38:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| , SchemaMetaFieldDef, TypeMetaFieldDef, TypeNameMetaFieldDef // Predicates
| , isSchema, isDirective, isType, isScalarType, isObjectType, isInterfaceType, isUnionType, isEnumType, isInputObjectType, isListType, isNonNullType, isInputType, isOutputType, isLeafType, isCompositeType, isAbstractType, isWrappingType, isNullableType, isNamedType, isRequiredArgument, isRequiredInputField, isSpecifiedScalarType, isIntrospectionType, isSpecifiedDirective // Assertions
&gt; , assertSchema, assertDirective, assertType, assertScalarType, assertObjectType, assertInterfaceType, assertUnionType, assertEnumType, assertInputObjectType, assertListType, assertNonNullType, assertInputType, assertOutputType, assertLeafType, assertCompositeType, assertAbstractType, assertWrappingType, assertNullableType, assertNamedType // Un-modifiers
| , getNullableType, getNamedType // Validate GraphQL schema.
| , validateSchema, assertValidSchema } from "./type/index.mjs";
 @ ./node_modules/graphql-tag/lib/index.js 2:0-32 65:21-26
 @ ./src/generated/graphql.ts 7:38-60
 @ ./src/ sync (^.?|\.[^d]|[^.]d|[^.][^d])\.(j|t)sx?$ ./generated/graphql.ts
 @ ./src/index.ts 5:12-81

webpack 5.45.0 compiled with 2 errors in 31329 ms
</code></pre></div>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></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">Hello,<br>
When I build with NODE_ENV=production, React-Router does not render any routes. Otherwise, I works in developpment.</p>
<p dir="auto">build script</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;build&quot;: &quot;rm -rf ./dist &amp;&amp; NODE_ENV=production webpack --config build/webpack.config.js -p&quot;"><pre class="notranslate"><span class="pl-ent">"build"</span>: <span class="pl-s"><span class="pl-pds">"</span>rm -rf ./dist &amp;&amp; NODE_ENV=production webpack --config build/webpack.config.js -p<span class="pl-pds">"</span></span></pre></div>
<p dir="auto">.babel-rc</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    [&quot;@babel/preset-env&quot;, {
      &quot;modules&quot;: false,
      &quot;targets&quot;: {
        &quot;browsers&quot;: [&quot;last 2 versions&quot;]
      },
      &quot;development&quot;: {
        &quot;plugins&quot;: [
          &quot;babel-plugin-styled-components&quot;
        ]
      },
      &quot;production&quot;: {
        &quot;plugins&quot;: [
          &quot;babel-plugin-styled-components&quot;
        ]
      },
      &quot;exclude&quot;: [&quot;transform-regenerator&quot;, &quot;transform-async-to-generator&quot;]
    }]
  ],
  &quot;plugins&quot;: [
    [&quot;@babel/plugin-transform-react-jsx&quot;, {&quot;pragma&quot;: &quot;h&quot;}],
    [&quot;@babel/plugin-proposal-object-rest-spread&quot;],
    [&quot;transform-react-remove-prop-types&quot;],
    [&quot;babel-plugin-styled-components&quot;],
    [&quot;syntax-dynamic-import&quot;],
    [&quot;module:fast-async&quot;, {
      &quot;compiler&quot;: {
        &quot;promises&quot;: true,
        &quot;generators&quot;: false
      },
      &quot;runtimePattern&quot;: &quot;home.js&quot;,
      &quot;spec&quot;: true
    }]
  ]
}"><pre class="notranslate">{
  <span class="pl-ent">"presets"</span>: [
    [<span class="pl-s"><span class="pl-pds">"</span>@babel/preset-env<span class="pl-pds">"</span></span>, {
      <span class="pl-ent">"modules"</span>: <span class="pl-c1">false</span>,
      <span class="pl-ent">"targets"</span>: {
        <span class="pl-ent">"browsers"</span>: [<span class="pl-s"><span class="pl-pds">"</span>last 2 versions<span class="pl-pds">"</span></span>]
      },
      <span class="pl-ent">"development"</span>: {
        <span class="pl-ent">"plugins"</span>: [
          <span class="pl-s"><span class="pl-pds">"</span>babel-plugin-styled-components<span class="pl-pds">"</span></span>
        ]
      },
      <span class="pl-ent">"production"</span>: {
        <span class="pl-ent">"plugins"</span>: [
          <span class="pl-s"><span class="pl-pds">"</span>babel-plugin-styled-components<span class="pl-pds">"</span></span>
        ]
      },
      <span class="pl-ent">"exclude"</span>: [<span class="pl-s"><span class="pl-pds">"</span>transform-regenerator<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>transform-async-to-generator<span class="pl-pds">"</span></span>]
    }]
  ],
  <span class="pl-ent">"plugins"</span>: [
    [<span class="pl-s"><span class="pl-pds">"</span>@babel/plugin-transform-react-jsx<span class="pl-pds">"</span></span>, {<span class="pl-ent">"pragma"</span>: <span class="pl-s"><span class="pl-pds">"</span>h<span class="pl-pds">"</span></span>}],
    [<span class="pl-s"><span class="pl-pds">"</span>@babel/plugin-proposal-object-rest-spread<span class="pl-pds">"</span></span>],
    [<span class="pl-s"><span class="pl-pds">"</span>transform-react-remove-prop-types<span class="pl-pds">"</span></span>],
    [<span class="pl-s"><span class="pl-pds">"</span>babel-plugin-styled-components<span class="pl-pds">"</span></span>],
    [<span class="pl-s"><span class="pl-pds">"</span>syntax-dynamic-import<span class="pl-pds">"</span></span>],
    [<span class="pl-s"><span class="pl-pds">"</span>module:fast-async<span class="pl-pds">"</span></span>, {
      <span class="pl-ent">"compiler"</span>: {
        <span class="pl-ent">"promises"</span>: <span class="pl-c1">true</span>,
        <span class="pl-ent">"generators"</span>: <span class="pl-c1">false</span>
      },
      <span class="pl-ent">"runtimePattern"</span>: <span class="pl-s"><span class="pl-pds">"</span>home.js<span class="pl-pds">"</span></span>,
      <span class="pl-ent">"spec"</span>: <span class="pl-c1">true</span>
    }]
  ]
}</pre></div>
<p dir="auto">webpack.config.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const config = require('../config.js');
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const TidyHtmlWebpackPlugin = require('tidy-html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const { InjectManifest } = require('workbox-webpack-plugin');
const autoprefixer = require('autoprefixer');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const production = process.env.NODE_ENV === 'production';

const sw = path.join(__dirname, '../src/sw.js');
const plugins = [
  new MiniCSSExtractPlugin({
    filename: '[name].[contenthash].css'
  }),
  ProgressBarPlugin()
];

const devServer = {
  contentBase: config.contentBase,
  hot: true,
  hotOnly: true,
  historyApiFallback: true,
  port: config.port.front,
  compress: production,
  inline: !production,
  hot: !production,
  stats: {
    assets: true,
    children: false,
    chunks: false,
    hash: true,
    modules: false,
    publicPath: false,
    timings: true,
    version: false,
    warnings: true
  }
}

if (production) {
  plugins.push(
    new webpack.optimize.OccurrenceOrderPlugin(),
    new htmlWebpackPlugin({
      template: config.template,
      minify: {
        removeComments: true
      },
      //cache: true,
      // make it work consistently with multiple chunks
      chunksSortMode: 'dependency'
    }),
    // preload main bundles
    // prefetch should be done with webpack
    // when native support for prefetch will land
    new PreloadWebpackPlugin({
      rel: 'preload',
      include: 'initial'
    }),
    // new TidyHtmlWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../src/assets/'),
        to: path.resolve(__dirname, '../dist/assets/')
      },
      {
       from: path.resolve(__dirname, '../src/manifest.json'),
       to: path.resolve(__dirname, '../dist/manifest.json')
      },
      {
        from: path.resolve(__dirname, '../src/third_party/idb-keyval.min.js'),
        to: path.resolve(__dirname, '../dist/third_party/idb-keyval.min.js')
      }
    ]),
    new InjectManifest({
      swSrc: sw
    })
  );
} else {
  plugins.push(
    new webpack.HotModuleReplacementPlugin(), // hot reload
    new htmlWebpackPlugin({ // generate index.html
      template: config.template,
    }),
    new FriendlyErrorsPlugin()
  );
};

const common = {
  devtool: config.devtool,
  mode: production ? 'production' : 'development',
  // do not continue build if any errors
  bail: true,
  // watch mode
  watch: !production,
  entry: {
    app: config.entry.front
  },
  output: {
    path: path.resolve('dist'),
    filename: production ? '[name].bundle.[hash].js' : '[name].bundle.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.css', '.scss'],
    alias: {
      // in order to use css-transition-group
      // you have to aliase react and react-dom
      react: 'preact-compat',
			'react-dom': 'preact-compat',
			'react-addons-css-transition-group': 'preact-css-transition-group',
      components: config.componentsPath,
      routes: config.routesPath,
      src: config.staticPath
    }
  },
  module: {
    rules: [{
      test: /\.(css|scss)$/,
      use: [
        MiniCSSExtractPlugin.loader,
        {
          loader: 'css-loader', options: {minimize: true}
        },
        {
          loader: 'sass-loader'
        }
      ]
    },{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      include: path.resolve(__dirname, &quot;../src&quot;),
      loader: 'babel-loader'
    },
    {
      test: /\.(.png|svg)$/,
      // compress images
      loader: 'image-webpack-loader',
      // Ensure this loader run before svg-loader or url-loader
      enforce: 'pre'
    },
    // {
    //   test: /\.svg$/,
    //   loader: 'svg-url-loader',
    //   options: {
    //     // Inline image smaller than 10kb
    //     limit: 10 * 1024,
    //     // remove quotes from url
    //     // https://developers.google.com/web/fundamentals/performance/webpack/decrease-frontend-size
    //     noquotes: true
    //   }
    // },
    {
      test: /\.(png|svg)$/,
      loader: production ? 'file-loader' : 'url-loader',
      query: {
        limit: 10 * 1024,
        name: '[name]-[hash:7].[ext]'
      }
    }]
  },
  optimization: {
    concatenateModules: production,
    nodeEnv: process.env.NODE_ENV,
    minimize: production,
    // optimization.minimizer overrides default optimization
    // in webpack 4.
    // plugin optimizer should be put here
    // not in plugins anymore as before
    minimizer: [
      // minify js
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false
      }),
      // Compress extracted CSS.
      // Possible duplicated CSS from differents components can be deduped.
      new OptimizeCSSPlugin({
        cssProcessorOptions: {
          safe: true
        }
      })
    ],
    runtimeChunk: true,
    splitChunks: {
      chunks: 'all'
    }
  },
  performance: {
    hints: production ? 'warning' : false
  },
  plugins,
  devServer
};

module.exports = common;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'../config.js'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</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-k">const</span> <span class="pl-s1">htmlWebpackPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'html-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">TidyHtmlWebpackPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'tidy-html-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">CopyWebpackPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'copy-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">FriendlyErrorsPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'friendly-errors-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">OptimizeCSSPlugin</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">PreloadWebpackPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'preload-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-kos">{</span> InjectManifest <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'workbox-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">autoprefixer</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'autoprefixer'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">ProgressBarPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'progress-bar-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">MiniCSSExtractPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'mini-css-extract-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">UglifyJsPlugin</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'uglifyjs-webpack-plugin'</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-s1">production</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-c1">===</span> <span class="pl-s">'production'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">sw</span> <span class="pl-c1">=</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../src/sw.js'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">plugins</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
  <span class="pl-k">new</span> <span class="pl-v">MiniCSSExtractPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">filename</span>: <span class="pl-s">'[name].[contenthash].css'</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-v">ProgressBarPlugin</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">devServer</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">contentBase</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">contentBase</span><span class="pl-kos">,</span>
  <span class="pl-c1">hot</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">hotOnly</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">historyApiFallback</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">port</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">port</span><span class="pl-kos">.</span><span class="pl-c1">front</span><span class="pl-kos">,</span>
  <span class="pl-c1">compress</span>: <span class="pl-s1">production</span><span class="pl-kos">,</span>
  <span class="pl-c1">inline</span>: <span class="pl-c1">!</span><span class="pl-s1">production</span><span class="pl-kos">,</span>
  <span class="pl-c1">hot</span>: <span class="pl-c1">!</span><span class="pl-s1">production</span><span class="pl-kos">,</span>
  <span class="pl-c1">stats</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">children</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-c1">chunks</span>: <span class="pl-c1">false</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">modules</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-c1">publicPath</span>: <span class="pl-c1">false</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">version</span>: <span class="pl-c1">false</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-kos">}</span>

<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">production</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">plugins</span><span class="pl-kos">.</span><span class="pl-en">push</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">OccurrenceOrderPlugin</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">htmlWebpackPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">template</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">template</span><span class="pl-kos">,</span>
      <span class="pl-c1">minify</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">removeComments</span>: <span class="pl-c1">true</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-c">//cache: true,</span>
      <span class="pl-c">// make it work consistently with multiple chunks</span>
      <span class="pl-c1">chunksSortMode</span>: <span class="pl-s">'dependency'</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c">// preload main bundles</span>
    <span class="pl-c">// prefetch should be done with webpack</span>
    <span class="pl-c">// when native support for prefetch will land</span>
    <span class="pl-k">new</span> <span class="pl-v">PreloadWebpackPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">rel</span>: <span class="pl-s">'preload'</span><span class="pl-kos">,</span>
      <span class="pl-c1">include</span>: <span class="pl-s">'initial'</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c">// new TidyHtmlWebpackPlugin(),</span>
    <span class="pl-k">new</span> <span class="pl-v">CopyWebpackPlugin</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">from</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../src/assets/'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-c1">to</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../dist/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">from</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../src/manifest.json'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
       <span class="pl-c1">to</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../dist/manifest.json'</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">from</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../src/third_party/idb-keyval.min.js'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-c1">to</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'../dist/third_party/idb-keyval.min.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-k">new</span> <span class="pl-v">InjectManifest</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">swSrc</span>: <span class="pl-s1">sw</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">else</span> <span class="pl-kos">{</span>
  <span class="pl-s1">plugins</span><span class="pl-kos">.</span><span class="pl-en">push</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">HotModuleReplacementPlugin</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c">// hot reload</span>
    <span class="pl-k">new</span> <span class="pl-s1">htmlWebpackPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c">// generate index.html</span>
      <span class="pl-c1">template</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">template</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">FriendlyErrorsPlugin</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">const</span> <span class="pl-s1">common</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">devtool</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">devtool</span><span class="pl-kos">,</span>
  <span class="pl-c1">mode</span>: <span class="pl-s1">production</span> ? <span class="pl-s">'production'</span> : <span class="pl-s">'development'</span><span class="pl-kos">,</span>
  <span class="pl-c">// do not continue build if any errors</span>
  <span class="pl-c1">bail</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c">// watch mode</span>
  <span class="pl-c1">watch</span>: <span class="pl-c1">!</span><span class="pl-s1">production</span><span class="pl-kos">,</span>
  <span class="pl-c1">entry</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">app</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">entry</span><span class="pl-kos">.</span><span class="pl-c1">front</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">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'dist'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">filename</span>: <span class="pl-s1">production</span> ? <span class="pl-s">'[name].bundle.[hash].js'</span> : <span class="pl-s">'[name].bundle.js'</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-kos">,</span>
  <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">extensions</span>: <span class="pl-kos">[</span><span class="pl-s">'.js'</span><span class="pl-kos">,</span> <span class="pl-s">'.jsx'</span><span class="pl-kos">,</span> <span class="pl-s">'.css'</span><span class="pl-kos">,</span> <span class="pl-s">'.scss'</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-c">// in order to use css-transition-group</span>
      <span class="pl-c">// you have to aliase react and react-dom</span>
      <span class="pl-c1">react</span>: <span class="pl-s">'preact-compat'</span><span class="pl-kos">,</span>
			<span class="pl-s">'react-dom'</span>: <span class="pl-s">'preact-compat'</span><span class="pl-kos">,</span>
			<span class="pl-s">'react-addons-css-transition-group'</span>: <span class="pl-s">'preact-css-transition-group'</span><span class="pl-kos">,</span>
      <span class="pl-c1">components</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">componentsPath</span><span class="pl-kos">,</span>
      <span class="pl-c1">routes</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">routesPath</span><span class="pl-kos">,</span>
      <span class="pl-c1">src</span>: <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">staticPath</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">rules</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>css<span class="pl-c1">|</span>scss<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">use</span>: <span class="pl-kos">[</span>
        <span class="pl-v">MiniCSSExtractPlugin</span><span class="pl-kos">.</span><span class="pl-c1">loader</span><span class="pl-kos">,</span>
        <span class="pl-kos">{</span>
          <span class="pl-c1">loader</span>: <span class="pl-s">'css-loader'</span><span class="pl-kos">,</span> <span class="pl-c1">options</span>: <span class="pl-kos">{</span><span class="pl-c1">minimize</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-c1">loader</span>: <span class="pl-s">'sass-loader'</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><span class="pl-kos">(</span>js<span class="pl-c1">|</span>jsx<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">exclude</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-c1">include</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">"../src"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c1">loader</span>: <span class="pl-s">'babel-loader'</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>.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-c">// compress images</span>
      <span class="pl-c1">loader</span>: <span class="pl-s">'image-webpack-loader'</span><span class="pl-kos">,</span>
      <span class="pl-c">// Ensure this loader run before svg-loader or url-loader</span>
      <span class="pl-c1">enforce</span>: <span class="pl-s">'pre'</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c">// {</span>
    <span class="pl-c">//   test: /\.svg$/,</span>
    <span class="pl-c">//   loader: 'svg-url-loader',</span>
    <span class="pl-c">//   options: {</span>
    <span class="pl-c">//     // Inline image smaller than 10kb</span>
    <span class="pl-c">//     limit: 10 * 1024,</span>
    <span class="pl-c">//     // remove quotes from url</span>
    <span class="pl-c">//     // https://developers.google.com/web/fundamentals/performance/webpack/decrease-frontend-size</span>
    <span class="pl-c">//     noquotes: true</span>
    <span class="pl-c">//   }</span>
    <span class="pl-c">// },</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>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-s1">production</span> ? <span class="pl-s">'file-loader'</span> : <span class="pl-s">'url-loader'</span><span class="pl-kos">,</span>
      <span class="pl-c1">query</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">limit</span>: <span class="pl-c1">10</span> <span class="pl-c1">*</span> <span class="pl-c1">1024</span><span class="pl-kos">,</span>
        <span class="pl-c1">name</span>: <span class="pl-s">'[name]-[hash:7].[ext]'</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">optimization</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">concatenateModules</span>: <span class="pl-s1">production</span><span class="pl-kos">,</span>
    <span class="pl-c1">nodeEnv</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-c1">minimize</span>: <span class="pl-s1">production</span><span class="pl-kos">,</span>
    <span class="pl-c">// optimization.minimizer overrides default optimization</span>
    <span class="pl-c">// in webpack 4.</span>
    <span class="pl-c">// plugin optimizer should be put here</span>
    <span class="pl-c">// not in plugins anymore as before</span>
    <span class="pl-c1">minimizer</span>: <span class="pl-kos">[</span>
      <span class="pl-c">// minify js</span>
      <span class="pl-k">new</span> <span class="pl-v">UglifyJsPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
        <span class="pl-c1">cache</span>: <span class="pl-c1">true</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">sourceMap</span>: <span class="pl-c1">false</span>
      <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c">// Compress extracted CSS.</span>
      <span class="pl-c">// Possible duplicated CSS from differents components can be deduped.</span>
      <span class="pl-k">new</span> <span class="pl-v">OptimizeCSSPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
        <span class="pl-c1">cssProcessorOptions</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">safe</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-c1">runtimeChunk</span>: <span class="pl-c1">true</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-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">performance</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">hints</span>: <span class="pl-s1">production</span> ? <span class="pl-s">'warning'</span> : <span class="pl-c1">false</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  plugins<span class="pl-kos">,</span>
  devServer
<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-s1">common</span><span class="pl-kos">;</span></pre></div>



<p dir="auto"><strong>What is the expected behavior?</strong><br>
As it works in dev, it should work in prod.</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>