|
|
|
|
@ -1,55 +1,55 @@ |
|
|
|
|
'use strict'; |
|
|
|
|
"use strict"; |
|
|
|
|
|
|
|
|
|
const fs = require('fs'); |
|
|
|
|
const path = require('path'); |
|
|
|
|
const webpack = require('webpack'); |
|
|
|
|
const resolve = require('resolve'); |
|
|
|
|
const PnpWebpackPlugin = require('pnp-webpack-plugin'); |
|
|
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin'); |
|
|
|
|
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); |
|
|
|
|
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin'); |
|
|
|
|
const TerserPlugin = require('terser-webpack-plugin'); |
|
|
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
|
|
|
|
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); |
|
|
|
|
const safePostCssParser = require('postcss-safe-parser'); |
|
|
|
|
const ManifestPlugin = require('webpack-manifest-plugin'); |
|
|
|
|
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); |
|
|
|
|
const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); |
|
|
|
|
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); |
|
|
|
|
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); |
|
|
|
|
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); |
|
|
|
|
const ESLintPlugin = require('eslint-webpack-plugin'); |
|
|
|
|
const paths = require('./paths'); |
|
|
|
|
const modules = require('./modules'); |
|
|
|
|
const getClientEnvironment = require('./env'); |
|
|
|
|
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); |
|
|
|
|
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin'); |
|
|
|
|
const typescriptFormatter = require('react-dev-utils/typescriptFormatter'); |
|
|
|
|
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); |
|
|
|
|
const fs = require("fs"); |
|
|
|
|
const path = require("path"); |
|
|
|
|
const webpack = require("webpack"); |
|
|
|
|
const resolve = require("resolve"); |
|
|
|
|
const PnpWebpackPlugin = require("pnp-webpack-plugin"); |
|
|
|
|
const HtmlWebpackPlugin = require("html-webpack-plugin"); |
|
|
|
|
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin"); |
|
|
|
|
const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin"); |
|
|
|
|
const TerserPlugin = require("terser-webpack-plugin"); |
|
|
|
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); |
|
|
|
|
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); |
|
|
|
|
const safePostCssParser = require("postcss-safe-parser"); |
|
|
|
|
const ManifestPlugin = require("webpack-manifest-plugin"); |
|
|
|
|
const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin"); |
|
|
|
|
const WorkboxWebpackPlugin = require("workbox-webpack-plugin"); |
|
|
|
|
const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin"); |
|
|
|
|
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin"); |
|
|
|
|
const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent"); |
|
|
|
|
const ESLintPlugin = require("eslint-webpack-plugin"); |
|
|
|
|
const paths = require("./paths"); |
|
|
|
|
const modules = require("./modules"); |
|
|
|
|
const getClientEnvironment = require("./env"); |
|
|
|
|
const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin"); |
|
|
|
|
const ForkTsCheckerWebpackPlugin = require("react-dev-utils/ForkTsCheckerWebpackPlugin"); |
|
|
|
|
const typescriptFormatter = require("react-dev-utils/typescriptFormatter"); |
|
|
|
|
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); |
|
|
|
|
|
|
|
|
|
const postcssNormalize = require('postcss-normalize'); |
|
|
|
|
const postcssNormalize = require("postcss-normalize"); |
|
|
|
|
|
|
|
|
|
const appPackageJson = require(paths.appPackageJson); |
|
|
|
|
|
|
|
|
|
// Source maps are resource heavy and can cause out of memory issue for large source files.
|
|
|
|
|
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; |
|
|
|
|
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false"; |
|
|
|
|
|
|
|
|
|
const webpackDevClientEntry = require.resolve( |
|
|
|
|
'react-dev-utils/webpackHotDevClient' |
|
|
|
|
"react-dev-utils/webpackHotDevClient" |
|
|
|
|
); |
|
|
|
|
const reactRefreshOverlayEntry = require.resolve( |
|
|
|
|
'react-dev-utils/refreshOverlayInterop' |
|
|
|
|
"react-dev-utils/refreshOverlayInterop" |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
|
|
|
|
|
// makes for a smoother build process.
|
|
|
|
|
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'; |
|
|
|
|
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false"; |
|
|
|
|
|
|
|
|
|
const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true'; |
|
|
|
|
const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true'; |
|
|
|
|
const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === "true"; |
|
|
|
|
const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === "true"; |
|
|
|
|
|
|
|
|
|
const imageInlineSizeLimit = parseInt( |
|
|
|
|
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000' |
|
|
|
|
process.env.IMAGE_INLINE_SIZE_LIMIT || "10000" |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
// Check if TypeScript is setup
|
|
|
|
|
@ -65,12 +65,12 @@ const sassRegex = /\.(scss|sass)$/; |
|
|
|
|
const sassModuleRegex = /\.module\.(scss|sass)$/; |
|
|
|
|
|
|
|
|
|
const hasJsxRuntime = (() => { |
|
|
|
|
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') { |
|
|
|
|
if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
require.resolve('react/jsx-runtime'); |
|
|
|
|
require.resolve("react/jsx-runtime"); |
|
|
|
|
return true; |
|
|
|
|
} catch (e) { |
|
|
|
|
return false; |
|
|
|
|
@ -80,13 +80,13 @@ const hasJsxRuntime = (() => { |
|
|
|
|
// This is the production and development configuration.
|
|
|
|
|
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
|
|
|
|
|
module.exports = function (webpackEnv) { |
|
|
|
|
const isEnvDevelopment = webpackEnv === 'development'; |
|
|
|
|
const isEnvProduction = webpackEnv === 'production'; |
|
|
|
|
const isEnvDevelopment = webpackEnv === "development"; |
|
|
|
|
const isEnvProduction = webpackEnv === "production"; |
|
|
|
|
|
|
|
|
|
// Variable used for enabling profiling in Production
|
|
|
|
|
// passed into alias object. Uses a flag if passed into the build command
|
|
|
|
|
const isEnvProductionProfile = |
|
|
|
|
isEnvProduction && process.argv.includes('--profile'); |
|
|
|
|
isEnvProduction && process.argv.includes("--profile"); |
|
|
|
|
|
|
|
|
|
// We will provide `paths.publicUrlOrPath` to our app
|
|
|
|
|
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
|
|
|
|
@ -99,33 +99,33 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// common function to get style loaders
|
|
|
|
|
const getStyleLoaders = (cssOptions, preProcessor) => { |
|
|
|
|
const loaders = [ |
|
|
|
|
isEnvDevelopment && require.resolve('style-loader'), |
|
|
|
|
isEnvDevelopment && require.resolve("style-loader"), |
|
|
|
|
isEnvProduction && { |
|
|
|
|
loader: MiniCssExtractPlugin.loader, |
|
|
|
|
// css is located in `static/css`, use '../../' to locate index.html folder
|
|
|
|
|
// in production `paths.publicUrlOrPath` can be a relative path
|
|
|
|
|
options: paths.publicUrlOrPath.startsWith('.') |
|
|
|
|
? { publicPath: '../../' } |
|
|
|
|
options: paths.publicUrlOrPath.startsWith(".") |
|
|
|
|
? { publicPath: "../../" } |
|
|
|
|
: {}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
loader: require.resolve('css-loader'), |
|
|
|
|
loader: require.resolve("css-loader"), |
|
|
|
|
options: cssOptions, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
// Options for PostCSS as we reference these options twice
|
|
|
|
|
// Adds vendor prefixing based on your specified browser support in
|
|
|
|
|
// package.json
|
|
|
|
|
loader: require.resolve('postcss-loader'), |
|
|
|
|
loader: require.resolve("postcss-loader"), |
|
|
|
|
options: { |
|
|
|
|
// Necessary for external CSS imports to work
|
|
|
|
|
// https://github.com/facebook/create-react-app/issues/2677
|
|
|
|
|
ident: 'postcss', |
|
|
|
|
ident: "postcss", |
|
|
|
|
plugins: () => [ |
|
|
|
|
require('postcss-flexbugs-fixes'), |
|
|
|
|
require('postcss-preset-env')({ |
|
|
|
|
require("postcss-flexbugs-fixes"), |
|
|
|
|
require("postcss-preset-env")({ |
|
|
|
|
autoprefixer: { |
|
|
|
|
flexbox: 'no-2009', |
|
|
|
|
flexbox: "no-2009", |
|
|
|
|
}, |
|
|
|
|
stage: 3, |
|
|
|
|
}), |
|
|
|
|
@ -141,7 +141,7 @@ module.exports = function (webpackEnv) { |
|
|
|
|
if (preProcessor) { |
|
|
|
|
loaders.push( |
|
|
|
|
{ |
|
|
|
|
loader: require.resolve('resolve-url-loader'), |
|
|
|
|
loader: require.resolve("resolve-url-loader"), |
|
|
|
|
options: { |
|
|
|
|
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, |
|
|
|
|
root: paths.appSrc, |
|
|
|
|
@ -159,14 +159,14 @@ module.exports = function (webpackEnv) { |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development', |
|
|
|
|
mode: isEnvProduction ? "production" : isEnvDevelopment && "development", |
|
|
|
|
// Stop compilation early in production
|
|
|
|
|
bail: isEnvProduction, |
|
|
|
|
devtool: isEnvProduction |
|
|
|
|
? shouldUseSourceMap |
|
|
|
|
? 'source-map' |
|
|
|
|
? "source-map" |
|
|
|
|
: false |
|
|
|
|
: isEnvDevelopment && 'cheap-module-source-map', |
|
|
|
|
: isEnvDevelopment && "cheap-module-source-map", |
|
|
|
|
// These are the "entry points" to our application.
|
|
|
|
|
// This means they will be the "root" imports that are included in JS bundle.
|
|
|
|
|
entry: |
|
|
|
|
@ -202,32 +202,33 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// There will be one main bundle, and one file per asynchronous chunk.
|
|
|
|
|
// In development, it does not produce real files.
|
|
|
|
|
filename: isEnvProduction |
|
|
|
|
? 'static/js/[name].[contenthash:8].js' |
|
|
|
|
: isEnvDevelopment && 'static/js/bundle.js', |
|
|
|
|
? "static/js/[name].[contenthash:8].js" |
|
|
|
|
: isEnvDevelopment && "static/js/bundle.js", |
|
|
|
|
// TODO: remove this when upgrading to webpack 5
|
|
|
|
|
futureEmitAssets: true, |
|
|
|
|
// There are also additional JS chunk files if you use code splitting.
|
|
|
|
|
chunkFilename: isEnvProduction |
|
|
|
|
? 'static/js/[name].[contenthash:8].chunk.js' |
|
|
|
|
: isEnvDevelopment && 'static/js/[name].chunk.js', |
|
|
|
|
? "static/js/[name].[contenthash:8].chunk.js" |
|
|
|
|
: isEnvDevelopment && "static/js/[name].chunk.js", |
|
|
|
|
// webpack uses `publicPath` to determine where the app is being served from.
|
|
|
|
|
// It requires a trailing slash, or the file assets will get an incorrect path.
|
|
|
|
|
// We inferred the "public path" (such as / or /my-project) from homepage.
|
|
|
|
|
publicPath: paths.publicUrlOrPath, |
|
|
|
|
// Point sourcemap entries to original disk location (format as URL on Windows)
|
|
|
|
|
devtoolModuleFilenameTemplate: isEnvProduction |
|
|
|
|
? info => |
|
|
|
|
? (info) => |
|
|
|
|
path |
|
|
|
|
.relative(paths.appSrc, info.absoluteResourcePath) |
|
|
|
|
.replace(/\\/g, '/') |
|
|
|
|
.replace(/\\/g, "/") |
|
|
|
|
: isEnvDevelopment && |
|
|
|
|
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')), |
|
|
|
|
((info) => |
|
|
|
|
path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")), |
|
|
|
|
// Prevents conflicts when multiple webpack runtimes (from different apps)
|
|
|
|
|
// are used on the same page.
|
|
|
|
|
jsonpFunction: `webpackJsonp${appPackageJson.name}`, |
|
|
|
|
// this defaults to 'window', but by setting it to 'this' then
|
|
|
|
|
// module chunks which are built will work in web workers as well.
|
|
|
|
|
globalObject: 'this', |
|
|
|
|
globalObject: "this", |
|
|
|
|
}, |
|
|
|
|
optimization: { |
|
|
|
|
minimize: isEnvProduction, |
|
|
|
|
@ -289,7 +290,7 @@ module.exports = function (webpackEnv) { |
|
|
|
|
: false, |
|
|
|
|
}, |
|
|
|
|
cssProcessorPluginOptions: { |
|
|
|
|
preset: ['default', { minifyFontValues: { removeQuotes: false } }], |
|
|
|
|
preset: ["default", { minifyFontValues: { removeQuotes: false } }], |
|
|
|
|
}, |
|
|
|
|
}), |
|
|
|
|
], |
|
|
|
|
@ -297,14 +298,14 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// https://twitter.com/wSokra/status/969633336732905474
|
|
|
|
|
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
|
|
|
|
|
splitChunks: { |
|
|
|
|
chunks: 'all', |
|
|
|
|
chunks: "all", |
|
|
|
|
name: isEnvDevelopment, |
|
|
|
|
}, |
|
|
|
|
// Keep the runtime chunk separated to enable long term caching
|
|
|
|
|
// https://twitter.com/wSokra/status/969679223278505985
|
|
|
|
|
// https://github.com/facebook/create-react-app/issues/5358
|
|
|
|
|
runtimeChunk: { |
|
|
|
|
name: entrypoint => `runtime-${entrypoint.name}`, |
|
|
|
|
name: (entrypoint) => `runtime-${entrypoint.name}`, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
resolve: { |
|
|
|
|
@ -312,7 +313,7 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// We placed these paths second because we want `node_modules` to "win"
|
|
|
|
|
// if there are any conflicts. This matches Node resolution mechanism.
|
|
|
|
|
// https://github.com/facebook/create-react-app/issues/253
|
|
|
|
|
modules: ['node_modules', paths.appNodeModules].concat( |
|
|
|
|
modules: ["node_modules", paths.appNodeModules].concat( |
|
|
|
|
modules.additionalModulePaths || [] |
|
|
|
|
), |
|
|
|
|
// These are the reasonable defaults supported by the Node ecosystem.
|
|
|
|
|
@ -322,16 +323,16 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// `web` extension prefixes have been added for better support
|
|
|
|
|
// for React Native Web.
|
|
|
|
|
extensions: paths.moduleFileExtensions |
|
|
|
|
.map(ext => `.${ext}`) |
|
|
|
|
.filter(ext => useTypeScript || !ext.includes('ts')), |
|
|
|
|
.map((ext) => `.${ext}`) |
|
|
|
|
.filter((ext) => useTypeScript || !ext.includes("ts")), |
|
|
|
|
alias: { |
|
|
|
|
// Support React Native Web
|
|
|
|
|
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
|
|
|
|
|
'react-native': 'react-native-web', |
|
|
|
|
"react-native": "react-native-web", |
|
|
|
|
// Allows for better profiling with ReactDevTools
|
|
|
|
|
...(isEnvProductionProfile && { |
|
|
|
|
'react-dom$': 'react-dom/profiling', |
|
|
|
|
'scheduler/tracing': 'scheduler/tracing-profiling', |
|
|
|
|
"react-dom$": "react-dom/profiling", |
|
|
|
|
"scheduler/tracing": "scheduler/tracing-profiling", |
|
|
|
|
}), |
|
|
|
|
...(modules.webpackAliases || {}), |
|
|
|
|
}, |
|
|
|
|
@ -371,11 +372,11 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// https://github.com/jshttp/mime-db
|
|
|
|
|
{ |
|
|
|
|
test: [/\.avif$/], |
|
|
|
|
loader: require.resolve('url-loader'), |
|
|
|
|
loader: require.resolve("url-loader"), |
|
|
|
|
options: { |
|
|
|
|
limit: imageInlineSizeLimit, |
|
|
|
|
mimetype: 'image/avif', |
|
|
|
|
name: 'static/media/[name].[hash:8].[ext]', |
|
|
|
|
mimetype: "image/avif", |
|
|
|
|
name: "static/media/[name].[hash:8].[ext]", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
// "url" loader works like "file" loader except that it embeds assets
|
|
|
|
|
@ -383,10 +384,19 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// A missing `test` is equivalent to a match.
|
|
|
|
|
{ |
|
|
|
|
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], |
|
|
|
|
loader: require.resolve('url-loader'), |
|
|
|
|
loader: require.resolve("url-loader"), |
|
|
|
|
options: { |
|
|
|
|
limit: imageInlineSizeLimit, |
|
|
|
|
name: 'static/media/[name].[hash:8].[ext]', |
|
|
|
|
name: "static/media/[name].[hash:8].[ext]", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
test: /\.*pdfjs-dist.*$/, |
|
|
|
|
use: { |
|
|
|
|
loader: "babel-loader", |
|
|
|
|
options: { |
|
|
|
|
presets: ["@babel/preset-env"], |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
// Process application JS with Babel.
|
|
|
|
|
@ -394,35 +404,35 @@ module.exports = function (webpackEnv) { |
|
|
|
|
{ |
|
|
|
|
test: /\.(js|mjs|jsx|ts|tsx)$/, |
|
|
|
|
include: paths.appSrc, |
|
|
|
|
loader: require.resolve('babel-loader'), |
|
|
|
|
loader: require.resolve("babel-loader"), |
|
|
|
|
options: { |
|
|
|
|
customize: require.resolve( |
|
|
|
|
'babel-preset-react-app/webpack-overrides' |
|
|
|
|
"babel-preset-react-app/webpack-overrides" |
|
|
|
|
), |
|
|
|
|
presets: [ |
|
|
|
|
[ |
|
|
|
|
require.resolve('babel-preset-react-app'), |
|
|
|
|
require.resolve("babel-preset-react-app"), |
|
|
|
|
{ |
|
|
|
|
runtime: hasJsxRuntime ? 'automatic' : 'classic', |
|
|
|
|
runtime: hasJsxRuntime ? "automatic" : "classic", |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
], |
|
|
|
|
|
|
|
|
|
plugins: [ |
|
|
|
|
[ |
|
|
|
|
require.resolve('babel-plugin-named-asset-import'), |
|
|
|
|
require.resolve("babel-plugin-named-asset-import"), |
|
|
|
|
{ |
|
|
|
|
loaderMap: { |
|
|
|
|
svg: { |
|
|
|
|
ReactComponent: |
|
|
|
|
'@svgr/webpack?-svgo,+titleProp,+ref![path]', |
|
|
|
|
"@svgr/webpack?-svgo,+titleProp,+ref![path]", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
isEnvDevelopment && |
|
|
|
|
shouldUseReactRefresh && |
|
|
|
|
require.resolve('react-refresh/babel'), |
|
|
|
|
require.resolve("react-refresh/babel"), |
|
|
|
|
].filter(Boolean), |
|
|
|
|
// This is a feature of `babel-loader` for webpack (not Babel itself).
|
|
|
|
|
// It enables caching results in ./node_modules/.cache/babel-loader/
|
|
|
|
|
@ -438,14 +448,14 @@ module.exports = function (webpackEnv) { |
|
|
|
|
{ |
|
|
|
|
test: /\.(js|mjs)$/, |
|
|
|
|
exclude: /@babel(?:\/|\\{1,2})runtime/, |
|
|
|
|
loader: require.resolve('babel-loader'), |
|
|
|
|
loader: require.resolve("babel-loader"), |
|
|
|
|
options: { |
|
|
|
|
babelrc: false, |
|
|
|
|
configFile: false, |
|
|
|
|
compact: false, |
|
|
|
|
presets: [ |
|
|
|
|
[ |
|
|
|
|
require.resolve('babel-preset-react-app/dependencies'), |
|
|
|
|
require.resolve("babel-preset-react-app/dependencies"), |
|
|
|
|
{ helpers: true }, |
|
|
|
|
], |
|
|
|
|
], |
|
|
|
|
@ -509,7 +519,7 @@ module.exports = function (webpackEnv) { |
|
|
|
|
? shouldUseSourceMap |
|
|
|
|
: isEnvDevelopment, |
|
|
|
|
}, |
|
|
|
|
'sass-loader' |
|
|
|
|
"sass-loader" |
|
|
|
|
), |
|
|
|
|
// Don't consider CSS imports dead code even if the
|
|
|
|
|
// containing package claims to have no side effects.
|
|
|
|
|
@ -531,7 +541,7 @@ module.exports = function (webpackEnv) { |
|
|
|
|
getLocalIdent: getCSSModuleLocalIdent, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
'sass-loader' |
|
|
|
|
"sass-loader" |
|
|
|
|
), |
|
|
|
|
}, |
|
|
|
|
// "file" loader makes sure those assets get served by WebpackDevServer.
|
|
|
|
|
@ -540,14 +550,14 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// This loader doesn't use a "test" so it will catch all modules
|
|
|
|
|
// that fall through the other loaders.
|
|
|
|
|
{ |
|
|
|
|
loader: require.resolve('file-loader'), |
|
|
|
|
loader: require.resolve("file-loader"), |
|
|
|
|
// Exclude `js` files to keep "css" loader working as it injects
|
|
|
|
|
// its runtime that would otherwise be processed through "file" loader.
|
|
|
|
|
// Also exclude `html` and `json` extensions so they get processed
|
|
|
|
|
// by webpacks internal loaders.
|
|
|
|
|
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/], |
|
|
|
|
options: { |
|
|
|
|
name: 'static/media/[name].[hash:8].[ext]', |
|
|
|
|
name: "static/media/[name].[hash:8].[ext]", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
// ** STOP ** Are you adding a new loader?
|
|
|
|
|
@ -635,8 +645,8 @@ module.exports = function (webpackEnv) { |
|
|
|
|
new MiniCssExtractPlugin({ |
|
|
|
|
// Options similar to the same options in webpackOptions.output
|
|
|
|
|
// both options are optional
|
|
|
|
|
filename: 'static/css/[name].[contenthash:8].css', |
|
|
|
|
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css', |
|
|
|
|
filename: "static/css/[name].[contenthash:8].css", |
|
|
|
|
chunkFilename: "static/css/[name].[contenthash:8].chunk.css", |
|
|
|
|
}), |
|
|
|
|
// Generate an asset manifest file with the following content:
|
|
|
|
|
// - "files" key: Mapping of all asset filenames to their corresponding
|
|
|
|
|
@ -645,7 +655,7 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// - "entrypoints" key: Array of files which are included in `index.html`,
|
|
|
|
|
// can be used to reconstruct the HTML if necessary
|
|
|
|
|
new ManifestPlugin({ |
|
|
|
|
fileName: 'asset-manifest.json', |
|
|
|
|
fileName: "asset-manifest.json", |
|
|
|
|
publicPath: paths.publicUrlOrPath, |
|
|
|
|
generate: (seed, files, entrypoints) => { |
|
|
|
|
const manifestFiles = files.reduce((manifest, file) => { |
|
|
|
|
@ -653,7 +663,7 @@ module.exports = function (webpackEnv) { |
|
|
|
|
return manifest; |
|
|
|
|
}, seed); |
|
|
|
|
const entrypointFiles = entrypoints.main.filter( |
|
|
|
|
fileName => !fileName.endsWith('.map') |
|
|
|
|
(fileName) => !fileName.endsWith(".map") |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
@ -684,7 +694,7 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// TypeScript type checking
|
|
|
|
|
useTypeScript && |
|
|
|
|
new ForkTsCheckerWebpackPlugin({ |
|
|
|
|
typescript: resolve.sync('typescript', { |
|
|
|
|
typescript: resolve.sync("typescript", { |
|
|
|
|
basedir: paths.appNodeModules, |
|
|
|
|
}), |
|
|
|
|
async: isEnvDevelopment, |
|
|
|
|
@ -701,12 +711,12 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// as micromatch doesn't match
|
|
|
|
|
// '../cra-template-typescript/template/src/App.tsx'
|
|
|
|
|
// otherwise.
|
|
|
|
|
'../**/src/**/*.{ts,tsx}', |
|
|
|
|
'**/src/**/*.{ts,tsx}', |
|
|
|
|
'!**/src/**/__tests__/**', |
|
|
|
|
'!**/src/**/?(*.)(spec|test).*', |
|
|
|
|
'!**/src/setupProxy.*', |
|
|
|
|
'!**/src/setupTests.*', |
|
|
|
|
"../**/src/**/*.{ts,tsx}", |
|
|
|
|
"**/src/**/*.{ts,tsx}", |
|
|
|
|
"!**/src/**/__tests__/**", |
|
|
|
|
"!**/src/**/?(*.)(spec|test).*", |
|
|
|
|
"!**/src/setupProxy.*", |
|
|
|
|
"!**/src/setupTests.*", |
|
|
|
|
], |
|
|
|
|
silent: true, |
|
|
|
|
// The formatter is invoked directly in WebpackDevServerUtils during development
|
|
|
|
|
@ -715,24 +725,24 @@ module.exports = function (webpackEnv) { |
|
|
|
|
!disableESLintPlugin && |
|
|
|
|
new ESLintPlugin({ |
|
|
|
|
// Plugin options
|
|
|
|
|
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'], |
|
|
|
|
formatter: require.resolve('react-dev-utils/eslintFormatter'), |
|
|
|
|
eslintPath: require.resolve('eslint'), |
|
|
|
|
extensions: ["js", "mjs", "jsx", "ts", "tsx"], |
|
|
|
|
formatter: require.resolve("react-dev-utils/eslintFormatter"), |
|
|
|
|
eslintPath: require.resolve("eslint"), |
|
|
|
|
failOnError: !(isEnvDevelopment && emitErrorsAsWarnings), |
|
|
|
|
context: paths.appSrc, |
|
|
|
|
cache: true, |
|
|
|
|
cacheLocation: path.resolve( |
|
|
|
|
paths.appNodeModules, |
|
|
|
|
'.cache/.eslintcache' |
|
|
|
|
".cache/.eslintcache" |
|
|
|
|
), |
|
|
|
|
// ESLint class options
|
|
|
|
|
cwd: paths.appPath, |
|
|
|
|
resolvePluginsRelativeTo: __dirname, |
|
|
|
|
baseConfig: { |
|
|
|
|
extends: [require.resolve('eslint-config-react-app/base')], |
|
|
|
|
extends: [require.resolve("eslint-config-react-app/base")], |
|
|
|
|
rules: { |
|
|
|
|
...(!hasJsxRuntime && { |
|
|
|
|
'react/react-in-jsx-scope': 'error', |
|
|
|
|
"react/react-in-jsx-scope": "error", |
|
|
|
|
}), |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
@ -741,14 +751,14 @@ module.exports = function (webpackEnv) { |
|
|
|
|
// Some libraries import Node modules but don't use them in the browser.
|
|
|
|
|
// Tell webpack to provide empty mocks for them so importing them works.
|
|
|
|
|
node: { |
|
|
|
|
module: 'empty', |
|
|
|
|
dgram: 'empty', |
|
|
|
|
dns: 'mock', |
|
|
|
|
fs: 'empty', |
|
|
|
|
http2: 'empty', |
|
|
|
|
net: 'empty', |
|
|
|
|
tls: 'empty', |
|
|
|
|
child_process: 'empty', |
|
|
|
|
module: "empty", |
|
|
|
|
dgram: "empty", |
|
|
|
|
dns: "mock", |
|
|
|
|
fs: "empty", |
|
|
|
|
http2: "empty", |
|
|
|
|
net: "empty", |
|
|
|
|
tls: "empty", |
|
|
|
|
child_process: "empty", |
|
|
|
|
}, |
|
|
|
|
// Turn off performance processing because we utilize
|
|
|
|
|
// our own hints via the FileSizeReporter
|
|
|
|
|
|
