git.fiddlerwoaroof.com
Browse code

Trim unnecessary parts of webpack config

Ed Langley authored on 14/05/2019 00:46:12
Showing 2 changed files
... ...
@@ -1,127 +1,67 @@
1
-'use strict';
2
-
3
-const fs = require('fs');
4
-const path = require('path');
5
-const webpack = require('webpack');
6
-const resolve = require('resolve');
7
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
8
-const HtmlWebpackPlugin = require('html-webpack-plugin');
9
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
10
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
11
-const TerserPlugin = require('terser-webpack-plugin');
12
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
13
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
14
-const safePostCssParser = require('postcss-safe-parser');
15
-const ManifestPlugin = require('webpack-manifest-plugin');
16
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
17
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
18
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
19
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
20
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
21
-const paths = require('./paths');
22
-const getClientEnvironment = require('./env');
23
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
24
-const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
25
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
26
-
1
+const fs = require("fs");
2
+const path = require("path");
3
+const webpack = require("webpack");
4
+const resolve = require("resolve");
5
+const PnpWebpackPlugin = require("pnp-webpack-plugin");
6
+const HtmlWebpackPlugin = require("html-webpack-plugin");
7
+const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
8
+const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
9
+const TerserPlugin = require("terser-webpack-plugin");
10
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
11
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
12
+const safePostCssParser = require("postcss-safe-parser");
13
+const ManifestPlugin = require("webpack-manifest-plugin");
14
+const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
15
+const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
16
+const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
17
+const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
18
+const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
19
+const paths = require("./paths");
20
+const getClientEnvironment = require("./env");
21
+const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
22
+const ForkTsCheckerWebpackPlugin = require("react-dev-utils/ForkTsCheckerWebpackPlugin");
23
+const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
27 24
 
28 25
 // Source maps are resource heavy and can cause out of memory issue for large source files.
29
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
26
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
30 27
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
31 28
 // makes for a smoother build process.
32
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
33
-
34
-// Check if TypeScript is setup
35
-const useTypeScript = fs.existsSync(paths.appTsConfig);
36
-
37
-// style files regexes
38
-const cssRegex = /\.css$/;
39
-const cssModuleRegex = /\.module\.css$/;
40
-const sassRegex = /\.(scss|sass)$/;
41
-const sassModuleRegex = /\.module\.(scss|sass)$/;
29
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
42 30
 
43 31
 // This is the production and development configuration.
44 32
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
45 33
 module.exports = function(webpackEnv) {
46
-  const isEnvDevelopment = webpackEnv === 'development';
47
-  const isEnvProduction = webpackEnv === 'production';
34
+  const isEnvDevelopment = webpackEnv === "development";
35
+  const isEnvProduction = webpackEnv === "production";
48 36
 
49 37
   // Webpack uses `publicPath` to determine where the app is being served from.
50 38
   // It requires a trailing slash, or the file assets will get an incorrect path.
51 39
   // In development, we always serve from the root. This makes config easier.
52 40
   const publicPath = isEnvProduction
53 41
     ? paths.servedPath
54
-    : isEnvDevelopment && '/';
42
+    : isEnvDevelopment && "/";
55 43
   // Some apps do not use client-side routing with pushState.
56 44
   // For these, "homepage" can be set to "." to enable relative asset paths.
57
-  const shouldUseRelativeAssetPaths = publicPath === './';
45
+  const shouldUseRelativeAssetPaths = publicPath === "./";
58 46
 
59 47
   // `publicUrl` is just like `publicPath`, but we will provide it to our app
60 48
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
61 49
   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
62 50
   const publicUrl = isEnvProduction
63 51
     ? publicPath.slice(0, -1)
64
-    : isEnvDevelopment && '';
52
+    : isEnvDevelopment && "";
65 53
   // Get environment variables to inject into our app.
66 54
   const env = getClientEnvironment(publicUrl);
67 55
 
68
-  // common function to get style loaders
69
-  const getStyleLoaders = (cssOptions, preProcessor) => {
70
-    const loaders = [
71
-      isEnvDevelopment && require.resolve('style-loader'),
72
-      isEnvProduction && {
73
-        loader: MiniCssExtractPlugin.loader,
74
-        options: Object.assign(
75
-          {},
76
-          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
77
-        ),
78
-      },
79
-      {
80
-        loader: require.resolve('css-loader'),
81
-        options: cssOptions,
82
-      },
83
-      {
84
-        // Options for PostCSS as we reference these options twice
85
-        // Adds vendor prefixing based on your specified browser support in
86
-        // package.json
87
-        loader: require.resolve('postcss-loader'),
88
-        options: {
89
-          // Necessary for external CSS imports to work
90
-          // https://github.com/facebook/create-react-app/issues/2677
91
-          ident: 'postcss',
92
-          plugins: () => [
93
-            require('postcss-flexbugs-fixes'),
94
-            require('postcss-preset-env')({
95
-              autoprefixer: {
96
-                flexbox: 'no-2009',
97
-              },
98
-              stage: 3,
99
-            }),
100
-          ],
101
-          sourceMap: isEnvProduction && shouldUseSourceMap,
102
-        },
103
-      },
104
-    ].filter(Boolean);
105
-    if (preProcessor) {
106
-      loaders.push({
107
-        loader: require.resolve(preProcessor),
108
-        options: {
109
-          sourceMap: isEnvProduction && shouldUseSourceMap,
110
-        },
111
-      });
112
-    }
113
-    return loaders;
114
-  };
115
-
116 56
   return {
117
-    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
57
+    mode: isEnvProduction ? "production" : isEnvDevelopment && "development",
118 58
     // Stop compilation early in production
119 59
     bail: isEnvProduction,
120 60
     devtool: isEnvProduction
121 61
       ? shouldUseSourceMap
122
-        ? 'source-map'
62
+        ? "source-map"
123 63
         : false
124
-      : isEnvDevelopment && 'cheap-module-source-map',
64
+      : isEnvDevelopment && "cheap-module-source-map",
125 65
     // These are the "entry points" to our application.
126 66
     // This means they will be the "root" imports that are included in JS bundle.
127 67
     entry: [
... ...
@@ -136,9 +76,9 @@ module.exports = function(webpackEnv) {
136 76
       // require.resolve('webpack-dev-server/client') + '?/',
137 77
       // require.resolve('webpack/hot/dev-server'),
138 78
       isEnvDevelopment &&
139
-        require.resolve('react-dev-utils/webpackHotDevClient'),
79
+        require.resolve("react-dev-utils/webpackHotDevClient"),
140 80
       // Finally, this is your app's code:
141
-      paths.appIndexJs,
81
+      paths.appIndexJs
142 82
       // We include the app code last so that if there is a runtime error during
143 83
       // initialization, it doesn't blow up the WebpackDevServer client, and
144 84
       // changing JS code would still trigger a refresh.
... ...
@@ -151,12 +91,12 @@ module.exports = function(webpackEnv) {
151 91
       // There will be one main bundle, and one file per asynchronous chunk.
152 92
       // In development, it does not produce real files.
153 93
       filename: isEnvProduction
154
-        ? 'static/js/[name].[contenthash:8].js'
155
-        : isEnvDevelopment && 'static/js/bundle.js',
94
+        ? "static/js/[name].[contenthash:8].js"
95
+        : isEnvDevelopment && "static/js/bundle.js",
156 96
       // There are also additional JS chunk files if you use code splitting.
157 97
       chunkFilename: isEnvProduction
158
-        ? 'static/js/[name].[contenthash:8].chunk.js'
159
-        : isEnvDevelopment && 'static/js/[name].chunk.js',
98
+        ? "static/js/[name].[contenthash:8].chunk.js"
99
+        : isEnvDevelopment && "static/js/[name].chunk.js",
160 100
       // We inferred the "public path" (such as / or /my-project) from homepage.
161 101
       // We use "/" in development.
162 102
       publicPath: publicPath,
... ...
@@ -165,9 +105,9 @@ module.exports = function(webpackEnv) {
165 105
         ? info =>
166 106
             path
167 107
               .relative(paths.appSrc, info.absoluteResourcePath)
168
-              .replace(/\\/g, '/')
108
+              .replace(/\\/g, "/")
169 109
         : isEnvDevelopment &&
170
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
110
+          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/"))
171 111
     },
172 112
     optimization: {
173 113
       minimize: isEnvProduction,
... ...
@@ -181,7 +121,7 @@ module.exports = function(webpackEnv) {
181 121
               // into invalid ecma 5 code. This is why the 'compress' and 'output'
182 122
               // sections only apply transformations that are ecma 5 safe
183 123
               // https://github.com/facebook/create-react-app/pull/4234
184
-              ecma: 8,
124
+              ecma: 8
185 125
             },
186 126
             compress: {
187 127
               ecma: 5,
... ...
@@ -195,60 +135,44 @@ module.exports = function(webpackEnv) {
195 135
               // https://github.com/facebook/create-react-app/issues/5250
196 136
               // Pending futher investigation:
197 137
               // https://github.com/terser-js/terser/issues/120
198
-              inline: 2,
138
+              inline: 2
199 139
             },
200 140
             mangle: {
201
-              safari10: true,
141
+              safari10: true
202 142
             },
203 143
             output: {
204 144
               ecma: 5,
205 145
               comments: false,
206 146
               // Turned on because emoji and regex is not minified properly using default
207 147
               // https://github.com/facebook/create-react-app/issues/2488
208
-              ascii_only: true,
209
-            },
148
+              ascii_only: true
149
+            }
210 150
           },
211 151
           // Use multi-process parallel running to improve the build speed
212 152
           // Default number of concurrent runs: os.cpus().length - 1
213 153
           parallel: true,
214 154
           // Enable file caching
215 155
           cache: true,
216
-          sourceMap: shouldUseSourceMap,
217
-        }),
218
-        // This is only used in production mode
219
-        new OptimizeCSSAssetsPlugin({
220
-          cssProcessorOptions: {
221
-            parser: safePostCssParser,
222
-            map: shouldUseSourceMap
223
-              ? {
224
-                  // `inline: false` forces the sourcemap to be output into a
225
-                  // separate file
226
-                  inline: false,
227
-                  // `annotation: true` appends the sourceMappingURL to the end of
228
-                  // the css file, helping the browser find the sourcemap
229
-                  annotation: true,
230
-                }
231
-              : false,
232
-          },
233
-        }),
156
+          sourceMap: shouldUseSourceMap
157
+        })
234 158
       ],
235 159
       // Automatically split vendor and commons
236 160
       // https://twitter.com/wSokra/status/969633336732905474
237 161
       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
238 162
       splitChunks: {
239
-        chunks: 'all',
240
-        name: false,
163
+        chunks: "all",
164
+        name: false
241 165
       },
242 166
       // Keep the runtime chunk separated to enable long term caching
243 167
       // https://twitter.com/wSokra/status/969679223278505985
244
-      runtimeChunk: true,
168
+      runtimeChunk: true
245 169
     },
246 170
     resolve: {
247 171
       // This allows you to set a fallback for where Webpack should look for modules.
248 172
       // We placed these paths second because we want `node_modules` to "win"
249 173
       // if there are any conflicts. This matches Node resolution mechanism.
250 174
       // https://github.com/facebook/create-react-app/issues/253
251
-      modules: ['node_modules'].concat(
175
+      modules: ["node_modules"].concat(
252 176
         // It is guaranteed to exist because we tweak it in `env.js`
253 177
         process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
254 178
       ),
... ...
@@ -258,14 +182,7 @@ module.exports = function(webpackEnv) {
258 182
       // https://github.com/facebook/create-react-app/issues/290
259 183
       // `web` extension prefixes have been added for better support
260 184
       // for React Native Web.
261
-      extensions: paths.moduleFileExtensions
262
-        .map(ext => `.${ext}`)
263
-        .filter(ext => useTypeScript || !ext.includes('ts')),
264
-      alias: {
265
-        // Support React Native Web
266
-        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
267
-        'react-native': 'react-native-web',
268
-      },
185
+      extensions: paths.moduleFileExtensions.map(ext => `.${ext}`),
269 186
       plugins: [
270 187
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
271 188
         // guards against forgotten dependencies and such.
... ...
@@ -275,15 +192,15 @@ module.exports = function(webpackEnv) {
275 192
         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
276 193
         // please link the files into your node_modules/ and let module-resolution kick in.
277 194
         // Make sure your source files are compiled, as they will not be processed in any way.
278
-        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
279
-      ],
195
+        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])
196
+      ]
280 197
     },
281 198
     resolveLoader: {
282 199
       plugins: [
283 200
         // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
284 201
         // from the current package.
285
-        PnpWebpackPlugin.moduleLoader(module),
286
-      ],
202
+        PnpWebpackPlugin.moduleLoader(module)
203
+      ]
287 204
     },
288 205
     module: {
289 206
       strictExportPresence: true,
... ...
@@ -295,155 +212,78 @@ module.exports = function(webpackEnv) {
295 212
         // It's important to do this before Babel processes the JS.
296 213
         {
297 214
           test: /\.(js|mjs|jsx)$/,
298
-          enforce: 'pre',
215
+          enforce: "pre",
299 216
           use: [
300 217
             {
301 218
               options: {
302
-                formatter: require.resolve('react-dev-utils/eslintFormatter'),
303
-                eslintPath: require.resolve('eslint'),
304
-                
219
+                formatter: require.resolve("react-dev-utils/eslintFormatter"),
220
+                eslintPath: require.resolve("eslint")
305 221
               },
306
-              loader: require.resolve('eslint-loader'),
307
-            },
222
+              loader: require.resolve("eslint-loader")
223
+            }
308 224
           ],
309
-          include: paths.appSrc,
225
+          include: paths.appSrc
310 226
         },
311 227
         {
312 228
           // "oneOf" will traverse all following loaders until one will
313 229
           // match the requirements. When no loader matches it will fall
314 230
           // back to the "file" loader at the end of the loader list.
315 231
           oneOf: [
316
-            // "url" loader works like "file" loader except that it embeds assets
317
-            // smaller than specified limit in bytes as data URLs to avoid requests.
318
-            // A missing `test` is equivalent to a match.
319
-            {
320
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
321
-              loader: require.resolve('url-loader'),
322
-              options: {
323
-                limit: 10000,
324
-                name: 'static/media/[name].[hash:8].[ext]',
325
-              },
326
-            },
327 232
             // Process application JS with Babel.
328
-            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
329 233
             {
330
-              test: /\.(js|mjs|jsx|ts|tsx)$/,
234
+              test: /\.(js)$/,
331 235
               include: paths.appSrc,
332
-              loader: require.resolve('babel-loader'),
236
+              loader: require.resolve("babel-loader"),
333 237
               options: {
334 238
                 customize: require.resolve(
335
-                  'babel-preset-react-app/webpack-overrides'
239
+                  "babel-preset-react-app/webpack-overrides"
336 240
                 ),
337
-                
241
+
338 242
                 plugins: [
339 243
                   [
340
-                    require.resolve('babel-plugin-named-asset-import'),
244
+                    require.resolve("babel-plugin-named-asset-import"),
341 245
                     {
342 246
                       loaderMap: {
343 247
                         svg: {
344
-                          ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
345
-                        },
346
-                      },
347
-                    },
348
-                  ],
248
+                          ReactComponent: "@svgr/webpack?-svgo,+ref![path]"
249
+                        }
250
+                      }
251
+                    }
252
+                  ]
349 253
                 ],
350 254
                 // This is a feature of `babel-loader` for webpack (not Babel itself).
351 255
                 // It enables caching results in ./node_modules/.cache/babel-loader/
352 256
                 // directory for faster rebuilds.
353 257
                 cacheDirectory: true,
354 258
                 cacheCompression: isEnvProduction,
355
-                compact: isEnvProduction,
356
-              },
259
+                compact: isEnvProduction
260
+              }
357 261
             },
358 262
             // Process any JS outside of the app with Babel.
359 263
             // Unlike the application JS, we only compile the standard ES features.
360 264
             {
361
-              test: /\.(js|mjs)$/,
265
+              test: /\.(js)$/,
362 266
               exclude: /@babel(?:\/|\\{1,2})runtime/,
363
-              loader: require.resolve('babel-loader'),
267
+              loader: require.resolve("babel-loader"),
364 268
               options: {
365 269
                 babelrc: false,
366 270
                 configFile: false,
367 271
                 compact: false,
368 272
                 presets: [
369 273
                   [
370
-                    require.resolve('babel-preset-react-app/dependencies'),
371
-                    { helpers: true },
372
-                  ],
274
+                    require.resolve("babel-preset-react-app/dependencies"),
275
+                    { helpers: true }
276
+                  ]
373 277
                 ],
374 278
                 cacheDirectory: true,
375 279
                 cacheCompression: isEnvProduction,
376
-                
280
+
377 281
                 // If an error happens in a package, it's possible to be
378 282
                 // because it was compiled. Thus, we don't want the browser
379 283
                 // debugger to show the original code. Instead, the code
380 284
                 // being evaluated would be much more helpful.
381
-                sourceMaps: false,
382
-              },
383
-            },
384
-            // "postcss" loader applies autoprefixer to our CSS.
385
-            // "css" loader resolves paths in CSS and adds assets as dependencies.
386
-            // "style" loader turns CSS into JS modules that inject <style> tags.
387
-            // In production, we use MiniCSSExtractPlugin to extract that CSS
388
-            // to a file, but in development "style" loader enables hot editing
389
-            // of CSS.
390
-            // By default we support CSS Modules with the extension .module.css
391
-            {
392
-              test: cssRegex,
393
-              exclude: cssModuleRegex,
394
-              use: getStyleLoaders({
395
-                importLoaders: 1,
396
-                sourceMap: isEnvProduction && shouldUseSourceMap,
397
-              }),
398
-              // Don't consider CSS imports dead code even if the
399
-              // containing package claims to have no side effects.
400
-              // Remove this when webpack adds a warning or an error for this.
401
-              // See https://github.com/webpack/webpack/issues/6571
402
-              sideEffects: true,
403
-            },
404
-            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
405
-            // using the extension .module.css
406
-            {
407
-              test: cssModuleRegex,
408
-              use: getStyleLoaders({
409
-                importLoaders: 1,
410
-                sourceMap: isEnvProduction && shouldUseSourceMap,
411
-                modules: true,
412
-                getLocalIdent: getCSSModuleLocalIdent,
413
-              }),
414
-            },
415
-            // Opt-in support for SASS (using .scss or .sass extensions).
416
-            // By default we support SASS Modules with the
417
-            // extensions .module.scss or .module.sass
418
-            {
419
-              test: sassRegex,
420
-              exclude: sassModuleRegex,
421
-              use: getStyleLoaders(
422
-                {
423
-                  importLoaders: 2,
424
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
425
-                },
426
-                'sass-loader'
427
-              ),
428
-              // Don't consider CSS imports dead code even if the
429
-              // containing package claims to have no side effects.
430
-              // Remove this when webpack adds a warning or an error for this.
431
-              // See https://github.com/webpack/webpack/issues/6571
432
-              sideEffects: true,
433
-            },
434
-            // Adds support for CSS Modules, but using SASS
435
-            // using the extension .module.scss or .module.sass
436
-            {
437
-              test: sassModuleRegex,
438
-              use: getStyleLoaders(
439
-                {
440
-                  importLoaders: 2,
441
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
442
-                  modules: true,
443
-                  getLocalIdent: getCSSModuleLocalIdent,
444
-                },
445
-                'sass-loader'
446
-              ),
285
+                sourceMaps: false
286
+              }
447 287
             },
448 288
             // "file" loader makes sure those assets get served by WebpackDevServer.
449 289
             // When you `import` an asset, you get its (virtual) filename.
... ...
@@ -451,21 +291,17 @@ module.exports = function(webpackEnv) {
451 291
             // This loader doesn't use a "test" so it will catch all modules
452 292
             // that fall through the other loaders.
453 293
             {
454
-              loader: require.resolve('file-loader'),
455
-              // Exclude `js` files to keep "css" loader working as it injects
456
-              // its runtime that would otherwise be processed through "file" loader.
457
-              // Also exclude `html` and `json` extensions so they get processed
458
-              // by webpacks internal loaders.
459
-              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
294
+              loader: require.resolve("file-loader"),
295
+              exclude: [/\.js$/, /\.html$/, /\.json$/],
460 296
               options: {
461
-                name: 'static/media/[name].[hash:8].[ext]',
462
-              },
463
-            },
297
+                name: "static/media/[name].[hash:8].[ext]"
298
+              }
299
+            }
464 300
             // ** STOP ** Are you adding a new loader?
465 301
             // Make sure to add the new loader(s) before the "file" loader.
466
-          ],
467
-        },
468
-      ],
302
+          ]
303
+        }
304
+      ]
469 305
     },
470 306
     plugins: [
471 307
       // Generates an `index.html` file with the <script> injected.
... ...
@@ -474,7 +310,7 @@ module.exports = function(webpackEnv) {
474 310
           {},
475 311
           {
476 312
             inject: true,
477
-            template: paths.appHtml,
313
+            template: paths.appHtml
478 314
           },
479 315
           isEnvProduction
480 316
             ? {
... ...
@@ -487,9 +323,8 @@ module.exports = function(webpackEnv) {
487 323
                   removeStyleLinkTypeAttributes: true,
488 324
                   keepClosingSlash: true,
489 325
                   minifyJS: true,
490
-                  minifyCSS: true,
491
-                  minifyURLs: true,
492
-                },
326
+                  minifyURLs: true
327
+                }
493 328
               }
494 329
             : undefined
495 330
         )
... ...
@@ -527,19 +362,12 @@ module.exports = function(webpackEnv) {
527 362
       // See https://github.com/facebook/create-react-app/issues/186
528 363
       isEnvDevelopment &&
529 364
         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
530
-      isEnvProduction &&
531
-        new MiniCssExtractPlugin({
532
-          // Options similar to the same options in webpackOptions.output
533
-          // both options are optional
534
-          filename: 'static/css/[name].[contenthash:8].css',
535
-          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
536
-        }),
537 365
       // Generate a manifest file which contains a mapping of all asset filenames
538 366
       // to their corresponding output file so that tools can pick it up without
539 367
       // having to parse `index.html`.
540 368
       new ManifestPlugin({
541
-        fileName: 'asset-manifest.json',
542
-        publicPath: publicPath,
369
+        fileName: "asset-manifest.json",
370
+        publicPath: publicPath
543 371
       }),
544 372
       // Moment.js is an extremely popular library that bundles large locale files
545 373
       // by default due to how Webpack interprets its code. This is a practical
... ...
@@ -553,53 +381,31 @@ module.exports = function(webpackEnv) {
553 381
         new WorkboxWebpackPlugin.GenerateSW({
554 382
           clientsClaim: true,
555 383
           exclude: [/\.map$/, /asset-manifest\.json$/],
556
-          importWorkboxFrom: 'cdn',
557
-          navigateFallback: publicUrl + '/index.html',
384
+          importWorkboxFrom: "cdn",
385
+          navigateFallback: publicUrl + "/index.html",
558 386
           navigateFallbackBlacklist: [
559 387
             // Exclude URLs starting with /_, as they're likely an API call
560
-            new RegExp('^/_'),
388
+            new RegExp("^/_"),
561 389
             // Exclude URLs containing a dot, as they're likely a resource in
562 390
             // public/ and not a SPA route
563
-            new RegExp('/[^/]+\\.[^/]+$'),
564
-          ],
565
-        }),
391
+            new RegExp("/[^/]+\\.[^/]+$")
392
+          ]
393
+        })
566 394
       // TypeScript type checking
567
-      useTypeScript &&
568
-        new ForkTsCheckerWebpackPlugin({
569
-          typescript: resolve.sync('typescript', {
570
-            basedir: paths.appNodeModules,
571
-          }),
572
-          async: isEnvDevelopment,
573
-          useTypescriptIncrementalApi: true,
574
-          checkSyntacticErrors: true,
575
-          tsconfig: paths.appTsConfig,
576
-          reportFiles: [
577
-            '**',
578
-            '!**/*.json',
579
-            '!**/__tests__/**',
580
-            '!**/?(*.)(spec|test).*',
581
-            '!**/src/setupProxy.*',
582
-            '!**/src/setupTests.*',
583
-          ],
584
-          watch: paths.appSrc,
585
-          silent: true,
586
-          // The formatter is invoked directly in WebpackDevServerUtils during development
587
-          formatter: isEnvProduction ? typescriptFormatter : undefined,
588
-        }),
589 395
     ].filter(Boolean),
590 396
     // Some libraries import Node modules but don't use them in the browser.
591 397
     // Tell Webpack to provide empty mocks for them so importing them works.
592 398
     node: {
593
-      module: 'empty',
594
-      dgram: 'empty',
595
-      dns: 'mock',
596
-      fs: 'empty',
597
-      net: 'empty',
598
-      tls: 'empty',
599
-      child_process: 'empty',
399
+      module: "empty",
400
+      dgram: "empty",
401
+      dns: "mock",
402
+      fs: "empty",
403
+      net: "empty",
404
+      tls: "empty",
405
+      child_process: "empty"
600 406
     },
601 407
     // Turn off performance processing because we utilize
602 408
     // our own hints via the FileSizeReporter
603
-    performance: false,
409
+    performance: false
604 410
   };
605 411
 };
... ...
@@ -88,7 +88,6 @@
88 88
     "react-test-renderer": "^16.5.2"
89 89
   },
90 90
   "scripts": {
91
-    "start": "node scripts/start.js",
92 91
     "build": "npx babel src -d dist",
93 92
     "watch": "npx babel -w src -d dist",
94 93
     "test": "node scripts/test.js --env=jsdom",