source: frontend/node_modules/react-scripts/config/webpack.config.js

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 11 days ago

Fix frontend appearance
  • Property mode set to 100644
File size: 31.4 KB
RevLine 
[9af201e]1// @remove-on-eject-begin
2/**
3 * Copyright (c) 2015-present, Facebook, Inc.
4 *
5 * This source code is licensed under the MIT license found in the
6 * LICENSE file in the root directory of this source tree.
7 */
8// @remove-on-eject-end
9'use strict';
10
11const fs = require('fs');
12const path = require('path');
13const webpack = require('webpack');
14const resolve = require('resolve');
15const HtmlWebpackPlugin = require('html-webpack-plugin');
16const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
17const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
18const TerserPlugin = require('terser-webpack-plugin');
19const MiniCssExtractPlugin = require('mini-css-extract-plugin');
20const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
21const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
22const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
23const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
24const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
25const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
26const ESLintPlugin = require('eslint-webpack-plugin');
27const paths = require('./paths');
28const modules = require('./modules');
29const getClientEnvironment = require('./env');
30const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
31const ForkTsCheckerWebpackPlugin =
32 process.env.TSC_COMPILE_ON_ERROR === 'true'
33 ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
34 : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
35const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
36// @remove-on-eject-begin
37const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
38// @remove-on-eject-end
39const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
40
41// Source maps are resource heavy and can cause out of memory issue for large source files.
42const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
43
44const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
45const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
46 '@pmmmwh/react-refresh-webpack-plugin'
47);
48const babelRuntimeEntry = require.resolve('babel-preset-react-app');
49const babelRuntimeEntryHelpers = require.resolve(
50 '@babel/runtime/helpers/esm/assertThisInitialized',
51 { paths: [babelRuntimeEntry] }
52);
53const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
54 paths: [babelRuntimeEntry],
55});
56
57// Some apps do not need the benefits of saving a web request, so not inlining the chunk
58// makes for a smoother build process.
59const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
60
61const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
62const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
63
64const imageInlineSizeLimit = parseInt(
65 process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
66);
67
68// Check if TypeScript is setup
69const useTypeScript = fs.existsSync(paths.appTsConfig);
70
71// Check if Tailwind config exists
72const useTailwind = fs.existsSync(
73 path.join(paths.appPath, 'tailwind.config.js')
74);
75
76// Get the path to the uncompiled service worker (if it exists).
77const swSrc = paths.swSrc;
78
79// style files regexes
80const cssRegex = /\.css$/;
81const cssModuleRegex = /\.module\.css$/;
82const sassRegex = /\.(scss|sass)$/;
83const sassModuleRegex = /\.module\.(scss|sass)$/;
84
85const hasJsxRuntime = (() => {
86 if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
87 return false;
88 }
89
90 try {
91 require.resolve('react/jsx-runtime');
92 return true;
93 } catch (e) {
94 return false;
95 }
96})();
97
98// This is the production and development configuration.
99// It is focused on developer experience, fast rebuilds, and a minimal bundle.
100module.exports = function (webpackEnv) {
101 const isEnvDevelopment = webpackEnv === 'development';
102 const isEnvProduction = webpackEnv === 'production';
103
104 // Variable used for enabling profiling in Production
105 // passed into alias object. Uses a flag if passed into the build command
106 const isEnvProductionProfile =
107 isEnvProduction && process.argv.includes('--profile');
108
109 // We will provide `paths.publicUrlOrPath` to our app
110 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
111 // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
112 // Get environment variables to inject into our app.
113 const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
114
115 const shouldUseReactRefresh = env.raw.FAST_REFRESH;
116
117 // common function to get style loaders
118 const getStyleLoaders = (cssOptions, preProcessor) => {
119 const loaders = [
120 isEnvDevelopment && require.resolve('style-loader'),
121 isEnvProduction && {
122 loader: MiniCssExtractPlugin.loader,
123 // css is located in `static/css`, use '../../' to locate index.html folder
124 // in production `paths.publicUrlOrPath` can be a relative path
125 options: paths.publicUrlOrPath.startsWith('.')
126 ? { publicPath: '../../' }
127 : {},
128 },
129 {
130 loader: require.resolve('css-loader'),
131 options: cssOptions,
132 },
133 {
134 // Options for PostCSS as we reference these options twice
135 // Adds vendor prefixing based on your specified browser support in
136 // package.json
137 loader: require.resolve('postcss-loader'),
138 options: {
139 postcssOptions: {
140 // Necessary for external CSS imports to work
141 // https://github.com/facebook/create-react-app/issues/2677
142 ident: 'postcss',
143 config: false,
144 plugins: !useTailwind
145 ? [
146 'postcss-flexbugs-fixes',
147 [
148 'postcss-preset-env',
149 {
150 autoprefixer: {
151 flexbox: 'no-2009',
152 },
153 stage: 3,
154 },
155 ],
156 // Adds PostCSS Normalize as the reset css with default options,
157 // so that it honors browserslist config in package.json
158 // which in turn let's users customize the target behavior as per their needs.
159 'postcss-normalize',
160 ]
161 : [
162 'tailwindcss',
163 'postcss-flexbugs-fixes',
164 [
165 'postcss-preset-env',
166 {
167 autoprefixer: {
168 flexbox: 'no-2009',
169 },
170 stage: 3,
171 },
172 ],
173 ],
174 },
175 sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
176 },
177 },
178 ].filter(Boolean);
179 if (preProcessor) {
180 loaders.push(
181 {
182 loader: require.resolve('resolve-url-loader'),
183 options: {
184 sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
185 root: paths.appSrc,
186 },
187 },
188 {
189 loader: require.resolve(preProcessor),
190 options: {
191 sourceMap: true,
192 },
193 }
194 );
195 }
196 return loaders;
197 };
198
199 return {
200 target: ['browserslist'],
201 // Webpack noise constrained to errors and warnings
202 stats: 'errors-warnings',
203 mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
204 // Stop compilation early in production
205 bail: isEnvProduction,
206 devtool: isEnvProduction
207 ? shouldUseSourceMap
208 ? 'source-map'
209 : false
210 : isEnvDevelopment && 'cheap-module-source-map',
211 // These are the "entry points" to our application.
212 // This means they will be the "root" imports that are included in JS bundle.
213 entry: paths.appIndexJs,
214 output: {
215 // The build folder.
216 path: paths.appBuild,
217 // Add /* filename */ comments to generated require()s in the output.
218 pathinfo: isEnvDevelopment,
219 // There will be one main bundle, and one file per asynchronous chunk.
220 // In development, it does not produce real files.
221 filename: isEnvProduction
222 ? 'static/js/[name].[contenthash:8].js'
223 : isEnvDevelopment && 'static/js/bundle.js',
224 // There are also additional JS chunk files if you use code splitting.
225 chunkFilename: isEnvProduction
226 ? 'static/js/[name].[contenthash:8].chunk.js'
227 : isEnvDevelopment && 'static/js/[name].chunk.js',
228 assetModuleFilename: 'static/media/[name].[hash][ext]',
229 // webpack uses `publicPath` to determine where the app is being served from.
230 // It requires a trailing slash, or the file assets will get an incorrect path.
231 // We inferred the "public path" (such as / or /my-project) from homepage.
232 publicPath: paths.publicUrlOrPath,
233 // Point sourcemap entries to original disk location (format as URL on Windows)
234 devtoolModuleFilenameTemplate: isEnvProduction
235 ? info =>
236 path
237 .relative(paths.appSrc, info.absoluteResourcePath)
238 .replace(/\\/g, '/')
239 : isEnvDevelopment &&
240 (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
241 },
242 cache: {
243 type: 'filesystem',
244 version: createEnvironmentHash(env.raw),
245 cacheDirectory: paths.appWebpackCache,
246 store: 'pack',
247 buildDependencies: {
248 defaultWebpack: ['webpack/lib/'],
249 config: [__filename],
250 tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
251 fs.existsSync(f)
252 ),
253 },
254 },
255 infrastructureLogging: {
256 level: 'none',
257 },
258 optimization: {
259 minimize: isEnvProduction,
260 minimizer: [
261 // This is only used in production mode
262 new TerserPlugin({
263 terserOptions: {
264 parse: {
265 // We want terser to parse ecma 8 code. However, we don't want it
266 // to apply any minification steps that turns valid ecma 5 code
267 // into invalid ecma 5 code. This is why the 'compress' and 'output'
268 // sections only apply transformations that are ecma 5 safe
269 // https://github.com/facebook/create-react-app/pull/4234
270 ecma: 8,
271 },
272 compress: {
273 ecma: 5,
274 warnings: false,
275 // Disabled because of an issue with Uglify breaking seemingly valid code:
276 // https://github.com/facebook/create-react-app/issues/2376
277 // Pending further investigation:
278 // https://github.com/mishoo/UglifyJS2/issues/2011
279 comparisons: false,
280 // Disabled because of an issue with Terser breaking valid code:
281 // https://github.com/facebook/create-react-app/issues/5250
282 // Pending further investigation:
283 // https://github.com/terser-js/terser/issues/120
284 inline: 2,
285 },
286 mangle: {
287 safari10: true,
288 },
289 // Added for profiling in devtools
290 keep_classnames: isEnvProductionProfile,
291 keep_fnames: isEnvProductionProfile,
292 output: {
293 ecma: 5,
294 comments: false,
295 // Turned on because emoji and regex is not minified properly using default
296 // https://github.com/facebook/create-react-app/issues/2488
297 ascii_only: true,
298 },
299 },
300 }),
301 // This is only used in production mode
302 new CssMinimizerPlugin(),
303 ],
304 },
305 resolve: {
306 // This allows you to set a fallback for where webpack should look for modules.
307 // We placed these paths second because we want `node_modules` to "win"
308 // if there are any conflicts. This matches Node resolution mechanism.
309 // https://github.com/facebook/create-react-app/issues/253
310 modules: ['node_modules', paths.appNodeModules].concat(
311 modules.additionalModulePaths || []
312 ),
313 // These are the reasonable defaults supported by the Node ecosystem.
314 // We also include JSX as a common component filename extension to support
315 // some tools, although we do not recommend using it, see:
316 // https://github.com/facebook/create-react-app/issues/290
317 // `web` extension prefixes have been added for better support
318 // for React Native Web.
319 extensions: paths.moduleFileExtensions
320 .map(ext => `.${ext}`)
321 .filter(ext => useTypeScript || !ext.includes('ts')),
322 alias: {
323 // Support React Native Web
324 // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
325 'react-native': 'react-native-web',
326 // Allows for better profiling with ReactDevTools
327 ...(isEnvProductionProfile && {
328 'react-dom$': 'react-dom/profiling',
329 'scheduler/tracing': 'scheduler/tracing-profiling',
330 }),
331 ...(modules.webpackAliases || {}),
332 },
333 plugins: [
334 // Prevents users from importing files from outside of src/ (or node_modules/).
335 // This often causes confusion because we only process files within src/ with babel.
336 // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
337 // please link the files into your node_modules/ and let module-resolution kick in.
338 // Make sure your source files are compiled, as they will not be processed in any way.
339 new ModuleScopePlugin(paths.appSrc, [
340 paths.appPackageJson,
341 reactRefreshRuntimeEntry,
342 reactRefreshWebpackPluginRuntimeEntry,
343 babelRuntimeEntry,
344 babelRuntimeEntryHelpers,
345 babelRuntimeRegenerator,
346 ]),
347 ],
348 },
349 module: {
350 strictExportPresence: true,
351 rules: [
352 // Handle node_modules packages that contain sourcemaps
353 shouldUseSourceMap && {
354 enforce: 'pre',
355 exclude: /@babel(?:\/|\\{1,2})runtime/,
356 test: /\.(js|mjs|jsx|ts|tsx|css)$/,
357 loader: require.resolve('source-map-loader'),
358 },
359 {
360 // "oneOf" will traverse all following loaders until one will
361 // match the requirements. When no loader matches it will fall
362 // back to the "file" loader at the end of the loader list.
363 oneOf: [
364 // TODO: Merge this config once `image/avif` is in the mime-db
365 // https://github.com/jshttp/mime-db
366 {
367 test: [/\.avif$/],
368 type: 'asset',
369 mimetype: 'image/avif',
370 parser: {
371 dataUrlCondition: {
372 maxSize: imageInlineSizeLimit,
373 },
374 },
375 },
376 // "url" loader works like "file" loader except that it embeds assets
377 // smaller than specified limit in bytes as data URLs to avoid requests.
378 // A missing `test` is equivalent to a match.
379 {
380 test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
381 type: 'asset',
382 parser: {
383 dataUrlCondition: {
384 maxSize: imageInlineSizeLimit,
385 },
386 },
387 },
388 {
389 test: /\.svg$/,
390 use: [
391 {
392 loader: require.resolve('@svgr/webpack'),
393 options: {
394 prettier: false,
395 svgo: false,
396 svgoConfig: {
397 plugins: [{ removeViewBox: false }],
398 },
399 titleProp: true,
400 ref: true,
401 },
402 },
403 {
404 loader: require.resolve('file-loader'),
405 options: {
406 name: 'static/media/[name].[hash].[ext]',
407 },
408 },
409 ],
410 issuer: {
411 and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
412 },
413 },
414 // Process application JS with Babel.
415 // The preset includes JSX, Flow, TypeScript, and some ESnext features.
416 {
417 test: /\.(js|mjs|jsx|ts|tsx)$/,
418 include: paths.appSrc,
419 loader: require.resolve('babel-loader'),
420 options: {
421 customize: require.resolve(
422 'babel-preset-react-app/webpack-overrides'
423 ),
424 presets: [
425 [
426 require.resolve('babel-preset-react-app'),
427 {
428 runtime: hasJsxRuntime ? 'automatic' : 'classic',
429 },
430 ],
431 ],
432 // @remove-on-eject-begin
433 babelrc: false,
434 configFile: false,
435 // Make sure we have a unique cache identifier, erring on the
436 // side of caution.
437 // We remove this when the user ejects because the default
438 // is sane and uses Babel options. Instead of options, we use
439 // the react-scripts and babel-preset-react-app versions.
440 cacheIdentifier: getCacheIdentifier(
441 isEnvProduction
442 ? 'production'
443 : isEnvDevelopment && 'development',
444 [
445 'babel-plugin-named-asset-import',
446 'babel-preset-react-app',
447 'react-dev-utils',
448 'react-scripts',
449 ]
450 ),
451 // @remove-on-eject-end
452 plugins: [
453 isEnvDevelopment &&
454 shouldUseReactRefresh &&
455 require.resolve('react-refresh/babel'),
456 ].filter(Boolean),
457 // This is a feature of `babel-loader` for webpack (not Babel itself).
458 // It enables caching results in ./node_modules/.cache/babel-loader/
459 // directory for faster rebuilds.
460 cacheDirectory: true,
461 // See #6846 for context on why cacheCompression is disabled
462 cacheCompression: false,
463 compact: isEnvProduction,
464 },
465 },
466 // Process any JS outside of the app with Babel.
467 // Unlike the application JS, we only compile the standard ES features.
468 {
469 test: /\.(js|mjs)$/,
470 exclude: /@babel(?:\/|\\{1,2})runtime/,
471 loader: require.resolve('babel-loader'),
472 options: {
473 babelrc: false,
474 configFile: false,
475 compact: false,
476 presets: [
477 [
478 require.resolve('babel-preset-react-app/dependencies'),
479 { helpers: true },
480 ],
481 ],
482 cacheDirectory: true,
483 // See #6846 for context on why cacheCompression is disabled
484 cacheCompression: false,
485 // @remove-on-eject-begin
486 cacheIdentifier: getCacheIdentifier(
487 isEnvProduction
488 ? 'production'
489 : isEnvDevelopment && 'development',
490 [
491 'babel-plugin-named-asset-import',
492 'babel-preset-react-app',
493 'react-dev-utils',
494 'react-scripts',
495 ]
496 ),
497 // @remove-on-eject-end
498 // Babel sourcemaps are needed for debugging into node_modules
499 // code. Without the options below, debuggers like VSCode
500 // show incorrect code and set breakpoints on the wrong lines.
501 sourceMaps: shouldUseSourceMap,
502 inputSourceMap: shouldUseSourceMap,
503 },
504 },
505 // "postcss" loader applies autoprefixer to our CSS.
506 // "css" loader resolves paths in CSS and adds assets as dependencies.
507 // "style" loader turns CSS into JS modules that inject <style> tags.
508 // In production, we use MiniCSSExtractPlugin to extract that CSS
509 // to a file, but in development "style" loader enables hot editing
510 // of CSS.
511 // By default we support CSS Modules with the extension .module.css
512 {
513 test: cssRegex,
514 exclude: cssModuleRegex,
515 use: getStyleLoaders({
516 importLoaders: 1,
517 sourceMap: isEnvProduction
518 ? shouldUseSourceMap
519 : isEnvDevelopment,
520 modules: {
521 mode: 'icss',
522 },
523 }),
524 // Don't consider CSS imports dead code even if the
525 // containing package claims to have no side effects.
526 // Remove this when webpack adds a warning or an error for this.
527 // See https://github.com/webpack/webpack/issues/6571
528 sideEffects: true,
529 },
530 // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
531 // using the extension .module.css
532 {
533 test: cssModuleRegex,
534 use: getStyleLoaders({
535 importLoaders: 1,
536 sourceMap: isEnvProduction
537 ? shouldUseSourceMap
538 : isEnvDevelopment,
539 modules: {
540 mode: 'local',
541 getLocalIdent: getCSSModuleLocalIdent,
542 },
543 }),
544 },
545 // Opt-in support for SASS (using .scss or .sass extensions).
546 // By default we support SASS Modules with the
547 // extensions .module.scss or .module.sass
548 {
549 test: sassRegex,
550 exclude: sassModuleRegex,
551 use: getStyleLoaders(
552 {
553 importLoaders: 3,
554 sourceMap: isEnvProduction
555 ? shouldUseSourceMap
556 : isEnvDevelopment,
557 modules: {
558 mode: 'icss',
559 },
560 },
561 'sass-loader'
562 ),
563 // Don't consider CSS imports dead code even if the
564 // containing package claims to have no side effects.
565 // Remove this when webpack adds a warning or an error for this.
566 // See https://github.com/webpack/webpack/issues/6571
567 sideEffects: true,
568 },
569 // Adds support for CSS Modules, but using SASS
570 // using the extension .module.scss or .module.sass
571 {
572 test: sassModuleRegex,
573 use: getStyleLoaders(
574 {
575 importLoaders: 3,
576 sourceMap: isEnvProduction
577 ? shouldUseSourceMap
578 : isEnvDevelopment,
579 modules: {
580 mode: 'local',
581 getLocalIdent: getCSSModuleLocalIdent,
582 },
583 },
584 'sass-loader'
585 ),
586 },
587 // "file" loader makes sure those assets get served by WebpackDevServer.
588 // When you `import` an asset, you get its (virtual) filename.
589 // In production, they would get copied to the `build` folder.
590 // This loader doesn't use a "test" so it will catch all modules
591 // that fall through the other loaders.
592 {
593 // Exclude `js` files to keep "css" loader working as it injects
594 // its runtime that would otherwise be processed through "file" loader.
595 // Also exclude `html` and `json` extensions so they get processed
596 // by webpacks internal loaders.
597 exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
598 type: 'asset/resource',
599 },
600 // ** STOP ** Are you adding a new loader?
601 // Make sure to add the new loader(s) before the "file" loader.
602 ],
603 },
604 ].filter(Boolean),
605 },
606 plugins: [
607 // Generates an `index.html` file with the <script> injected.
608 new HtmlWebpackPlugin(
609 Object.assign(
610 {},
611 {
612 inject: true,
613 template: paths.appHtml,
614 },
615 isEnvProduction
616 ? {
617 minify: {
618 removeComments: true,
619 collapseWhitespace: true,
620 removeRedundantAttributes: true,
621 useShortDoctype: true,
622 removeEmptyAttributes: true,
623 removeStyleLinkTypeAttributes: true,
624 keepClosingSlash: true,
625 minifyJS: true,
626 minifyCSS: true,
627 minifyURLs: true,
628 },
629 }
630 : undefined
631 )
632 ),
633 // Inlines the webpack runtime script. This script is too small to warrant
634 // a network request.
635 // https://github.com/facebook/create-react-app/issues/5358
636 isEnvProduction &&
637 shouldInlineRuntimeChunk &&
638 new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
639 // Makes some environment variables available in index.html.
640 // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
641 // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
642 // It will be an empty string unless you specify "homepage"
643 // in `package.json`, in which case it will be the pathname of that URL.
644 new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
645 // This gives some necessary context to module not found errors, such as
646 // the requesting resource.
647 new ModuleNotFoundPlugin(paths.appPath),
648 // Makes some environment variables available to the JS code, for example:
649 // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
650 // It is absolutely essential that NODE_ENV is set to production
651 // during a production build.
652 // Otherwise React will be compiled in the very slow development mode.
653 new webpack.DefinePlugin(env.stringified),
654 // Experimental hot reloading for React .
655 // https://github.com/facebook/react/tree/main/packages/react-refresh
656 isEnvDevelopment &&
657 shouldUseReactRefresh &&
658 new ReactRefreshWebpackPlugin({
659 overlay: false,
660 }),
661 // Watcher doesn't work well if you mistype casing in a path so we use
662 // a plugin that prints an error when you attempt to do this.
663 // See https://github.com/facebook/create-react-app/issues/240
664 isEnvDevelopment && new CaseSensitivePathsPlugin(),
665 isEnvProduction &&
666 new MiniCssExtractPlugin({
667 // Options similar to the same options in webpackOptions.output
668 // both options are optional
669 filename: 'static/css/[name].[contenthash:8].css',
670 chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
671 }),
672 // Generate an asset manifest file with the following content:
673 // - "files" key: Mapping of all asset filenames to their corresponding
674 // output file so that tools can pick it up without having to parse
675 // `index.html`
676 // - "entrypoints" key: Array of files which are included in `index.html`,
677 // can be used to reconstruct the HTML if necessary
678 new WebpackManifestPlugin({
679 fileName: 'asset-manifest.json',
680 publicPath: paths.publicUrlOrPath,
681 generate: (seed, files, entrypoints) => {
682 const manifestFiles = files.reduce((manifest, file) => {
683 manifest[file.name] = file.path;
684 return manifest;
685 }, seed);
686 const entrypointFiles = entrypoints.main.filter(
687 fileName => !fileName.endsWith('.map')
688 );
689
690 return {
691 files: manifestFiles,
692 entrypoints: entrypointFiles,
693 };
694 },
695 }),
696 // Moment.js is an extremely popular library that bundles large locale files
697 // by default due to how webpack interprets its code. This is a practical
698 // solution that requires the user to opt into importing specific locales.
699 // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
700 // You can remove this if you don't use Moment.js:
701 new webpack.IgnorePlugin({
702 resourceRegExp: /^\.\/locale$/,
703 contextRegExp: /moment$/,
704 }),
705 // Generate a service worker script that will precache, and keep up to date,
706 // the HTML & assets that are part of the webpack build.
707 isEnvProduction &&
708 fs.existsSync(swSrc) &&
709 new WorkboxWebpackPlugin.InjectManifest({
710 swSrc,
711 dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
712 exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
713 // Bump up the default maximum size (2mb) that's precached,
714 // to make lazy-loading failure scenarios less likely.
715 // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
716 maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
717 }),
718 // TypeScript type checking
719 useTypeScript &&
720 new ForkTsCheckerWebpackPlugin({
721 async: isEnvDevelopment,
722 typescript: {
723 typescriptPath: resolve.sync('typescript', {
724 basedir: paths.appNodeModules,
725 }),
726 configOverwrite: {
727 compilerOptions: {
728 sourceMap: isEnvProduction
729 ? shouldUseSourceMap
730 : isEnvDevelopment,
731 skipLibCheck: true,
732 inlineSourceMap: false,
733 declarationMap: false,
734 noEmit: true,
735 incremental: true,
736 tsBuildInfoFile: paths.appTsBuildInfoFile,
737 },
738 },
739 context: paths.appPath,
740 diagnosticOptions: {
741 syntactic: true,
742 },
743 mode: 'write-references',
744 // profile: true,
745 },
746 issue: {
747 // This one is specifically to match during CI tests,
748 // as micromatch doesn't match
749 // '../cra-template-typescript/template/src/App.tsx'
750 // otherwise.
751 include: [
752 { file: '../**/src/**/*.{ts,tsx}' },
753 { file: '**/src/**/*.{ts,tsx}' },
754 ],
755 exclude: [
756 { file: '**/src/**/__tests__/**' },
757 { file: '**/src/**/?(*.){spec|test}.*' },
758 { file: '**/src/setupProxy.*' },
759 { file: '**/src/setupTests.*' },
760 ],
761 },
762 logger: {
763 infrastructure: 'silent',
764 },
765 }),
766 !disableESLintPlugin &&
767 new ESLintPlugin({
768 // Plugin options
769 extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
770 formatter: require.resolve('react-dev-utils/eslintFormatter'),
771 eslintPath: require.resolve('eslint'),
772 failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
773 context: paths.appSrc,
774 cache: true,
775 cacheLocation: path.resolve(
776 paths.appNodeModules,
777 '.cache/.eslintcache'
778 ),
779 // ESLint class options
780 cwd: paths.appPath,
781 resolvePluginsRelativeTo: __dirname,
782 baseConfig: {
783 extends: [require.resolve('eslint-config-react-app/base')],
784 rules: {
785 ...(!hasJsxRuntime && {
786 'react/react-in-jsx-scope': 'error',
787 }),
788 },
789 },
790 }),
791 ].filter(Boolean),
792 // Turn off performance processing because we utilize
793 // our own hints via the FileSizeReporter
794 performance: false,
795 };
796};
Note: See TracBrowser for help on using the repository browser.