title: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ReferenceError: document is not defined
body: <p>Ok, So basically We use webpack to bundle our resources before deployment. However, now we want to also bundle our sass files through webpack is it simplifies our build process.it was going well, but now bundle.js is too big to deploy on production so I wanted to split bundle.js and styling files. I don't much know about plugins and all ,so I searched a little bit and found that mini-css-extract-plugin lets me split style files into a new file. So I went and tweaked the web-pack.config file according to the docs of
  mini-css-extract-plugin but I am getting so many errors. Can somebody guide me to split styles file and extract it from bundle.js?</p>
  <p>error :</p>
  <pre><code>ERROR in ./node_modules/normalize.css/normalize.css
  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ReferenceError: document is not defined
      at insertStyleElement (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:309:15)    at addStyle (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:424:13)
      at modulesToDom (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:297:18)      
      at module.exports.module.exports (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:455:25)
      at Object.&lt;anonymous&gt; (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:206:14)    at __webpack_require__ (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:21:30)    at D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:85:18
      at Object.&lt;anonymous&gt; (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:88:10) 
      at Module._compile (D:\ReactJs-Projects\Expensify-app\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
      at evalModuleCode (D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:61:10)
      at D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:166:21
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:343:11
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:681:15
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:15:1)
      at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:678:31
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1423:35
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1414:32
      at eval (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:11:1)
      at D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:321:9
      at TaskRunner.run (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
      at TerserPlugin.optimizeFn (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:227:18)
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:7:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1409:36
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1405:32
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at Compilation.seal (D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1342:27)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:675:18
   @ ./src/app.js 10:0-37
  
  ERROR in ./node_modules/react-dates/lib/css/_datepicker.css
  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ReferenceError: document is not defined
      at insertStyleElement (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:309:15)
      at addStyle (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:424:13)  
      at modulesToDom (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:297:18)
      at module.exports.module.exports (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:455:25)
      at Object.&lt;anonymous&gt; (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:206:14)
      at __webpack_require__ (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:21:30)
      at D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:85:18
      at Object.&lt;anonymous&gt; (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:88:10)
      at Module._compile (D:\ReactJs-Projects\Expensify-app\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
      at evalModuleCode (D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:61:10)
      at D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:166:21
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:343:11
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:681:15
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:15:1)
      at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:678:31
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1423:35
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1414:32
      at eval (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:11:1)
      at D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:321:9
      at TaskRunner.run (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
      at TerserPlugin.optimizeFn (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:227:18)
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:7:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1409:36
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1405:32
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at Compilation.seal (D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1342:27)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:675:18
   @ ./src/components/ExpenseForm.js 27:0-45
   @ ./src/components/AddExpensePage.js
   @ ./src/routers/AppRouter.js
   @ ./src/app.js
  
  ERROR in ./src/styles/styles.scss
  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ReferenceError: document is not defined
      at insertStyleElement (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:309:15)
      at addStyle (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:424:13)
      at modulesToDom (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:297:18)
      at module.exports.module.exports (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:455:25)       
      at Object.&lt;anonymous&gt; (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:206:14)
      at __webpack_require__ (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:21:30)
      at D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:85:18
      at Object.&lt;anonymous&gt; (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:88:10)
      at Module._compile (D:\ReactJs-Projects\Expensify-app\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
      at evalModuleCode (D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:61:10)
      at D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:166:21
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:343:11
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:681:15
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:15:1)
      at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:678:31
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1423:35
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1414:32
      at eval (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:11:1)
      at D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:321:9
      at TaskRunner.run (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
      at TerserPlugin.optimizeFn (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:227:18)
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:7:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1409:36
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1405:32
      at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), &lt;anonymous&gt;:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
      at Compilation.seal (D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1342:27)
      at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:675:18
   @ ./src/app.js 11:0-30
  </code></pre>
  <p>webpack.config.js :</p>
  <pre><code>const path = require(&quot;path&quot;);
  //const ExtractTextPlugin = require(&quot;extract-text-webpack-plugin&quot;);
  const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);
  
  module.exports = env =&gt; {
      const isProduction = env === &quot;production&quot;;
      //const CSSExtract = new ExtractTextPlugin(&quot;styles.css&quot;);
  
      console.log(&quot;env&quot;, env);
      return {
          entry: &quot;./src/app.js&quot;,
          output: {
              path: path.join(__dirname, &quot;public&quot;),
              filename: &quot;bundle.js&quot;,
          },
          module: {
              rules: [
                  {
                      loader: &quot;babel-loader&quot;,
                      test: /\.js$/,
                      exclude: /node_modules/,
                  },
                  {
                      test: /\.s?css$/,
                      use: [
                          {
                              loader: MiniCssExtractPlugin.loader,
                              options: {
                                  publicPath: path.join(__dirname, &quot;public&quot;),
                              },
                          },
                          &quot;style-loader&quot;,
                          &quot;css-loader&quot;, 
                          &quot;sass-loader&quot;, 
                      ],
                  },
              ],
          },
          plugins: [
              new MiniCssExtractPlugin({
                  filename: &quot;styles.css&quot;,
              }),
          ],
          // plugins: [CSSExtract],
          devtool: isProduction ? &quot;source-map&quot; : &quot;cheap-module-eval-source-map&quot;, 
  
          devServer: {
              contentBase: path.join(__dirname, &quot;public&quot;),
              historyApiFallback: true,
          },
      };
  };
  </code></pre>
  <p>package.json :</p>
  <pre><code>{
      &quot;name&quot;: &quot;expensify-app&quot;,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;main&quot;: &quot;index.js&quot;,
      &quot;author&quot;: &quot;Viral Thaker&quot;,
      &quot;license&quot;: &quot;MIT&quot;,
      &quot;scripts&quot;: {
          &quot;serve&quot;: &quot;live-server public/&quot;,
          &quot;build:dev&quot;: &quot;webpack&quot;,
          &quot;build:prod&quot;: &quot;webpack -p --env production&quot;,
          &quot;dev-server&quot;: &quot;webpack-dev-server&quot;,
          &quot;start&quot;: &quot;npm run dev-server&quot;,
          &quot;test&quot;: &quot;jest&quot;
      },
      &quot;dependencies&quot;: {
          &quot;babel-cli&quot;: &quot;^6.26.0&quot;,
          &quot;babel-core&quot;: &quot;^6.26.3&quot;,
          &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
          &quot;babel-plugin-transform-class-properties&quot;: &quot;^6.24.1&quot;,
          &quot;babel-plugin-transform-object-rest-spread&quot;: &quot;^6.26.0&quot;,
          &quot;css-loader&quot;: &quot;^4.0.0&quot;,
          &quot;jest&quot;: &quot;^26.4.1&quot;,
          &quot;live-server&quot;: &quot;^1.2.1&quot;,
          &quot;moment&quot;: &quot;^2.27.0&quot;,
          &quot;node-sass&quot;: &quot;^4.14.1&quot;,
          &quot;normalize.css&quot;: &quot;^8.0.1&quot;,
          &quot;react&quot;: &quot;^16.13.1&quot;,
          &quot;react-addons-shallow-compare&quot;: &quot;^15.6.2&quot;,
          &quot;react-dates&quot;: &quot;^21.8.0&quot;,
          &quot;react-dom&quot;: &quot;^16.13.1&quot;,
          &quot;react-modal&quot;: &quot;^3.11.2&quot;,
          &quot;react-redux&quot;: &quot;^7.2.1&quot;,
          &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
          &quot;redux&quot;: &quot;^4.0.5&quot;,
          &quot;sass-loader&quot;: &quot;^6.0.6&quot;,
          &quot;style-loader&quot;: &quot;^1.2.1&quot;,
          &quot;uuid&quot;: &quot;^8.3.0&quot;,
          &quot;validator&quot;: &quot;^13.1.1&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;@babel/core&quot;: &quot;^7.10.5&quot;,
          &quot;@babel/preset-env&quot;: &quot;^7.10.4&quot;,
          &quot;@babel/preset-react&quot;: &quot;^7.10.4&quot;,
          &quot;extract-text-webpack-plugin&quot;: &quot;^4.0.0-beta.0&quot;,
          &quot;mini-css-extract-plugin&quot;: &quot;^0.10.0&quot;,
          &quot;webpack&quot;: &quot;^4.44.1&quot;,
          &quot;webpack-cli&quot;: &quot;^3.3.12&quot;,
          &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;
      }
  }
  
  </code></pre>