Browse code
Trim unnecessary parts of webpack config
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 |
}; |