diff --git a/config/webpack.config.js b/config/webpack.config.js index 3aebdba..cdab9f9 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -82,7 +82,7 @@ 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) { +module.exports = function (webpackEnv) { const isEnvDevelopment = webpackEnv === "development"; const isEnvProduction = webpackEnv === "production"; @@ -107,9 +107,11 @@ module.exports = function(webpackEnv) { 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"), @@ -142,21 +144,18 @@ module.exports = function(webpackEnv) { }, ].filter(Boolean); if (preProcessor) { - loaders.push( - { - loader: require.resolve("resolve-url-loader"), - options: { - sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, - root: paths.appSrc, - }, + loaders.push({ + loader: require.resolve("resolve-url-loader"), + options: { + sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, + root: paths.appSrc, }, - { - loader: require.resolve(preProcessor), - options: { - sourceMap: true, - }, - } - ); + }, { + loader: require.resolve(preProcessor), + options: { + sourceMap: true, + }, + }); } return loaders; }; @@ -165,38 +164,37 @@ module.exports = function(webpackEnv) { mode: isEnvProduction ? "production" : isEnvDevelopment && "development", // Stop compilation early in production bail: isEnvProduction, - devtool: isEnvProduction - ? shouldUseSourceMap - ? "source-map" - : false - : isEnvDevelopment && "cheap-module-source-map", + devtool: isEnvProduction ? + shouldUseSourceMap ? + "source-map" : + false : + 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: - isEnvDevelopment && !shouldUseReactRefresh - ? [ - // Include an alternative client for WebpackDevServer. A client's job is to - // connect to WebpackDevServer by a socket and get notified about changes. - // When you save a file, the client will either apply hot updates (in case - // of CSS changes), or refresh the page (in case of JS changes). When you - // make a syntax error, this client will display a syntax error overlay. - // Note: instead of the default WebpackDevServer client, we use a custom one - // to bring better experience for Create React App users. You can replace - // the line below with these two lines if you prefer the stock client: - // - // require.resolve('webpack-dev-server/client') + '?/', - // require.resolve('webpack/hot/dev-server'), - // - // When using the experimental react-refresh integration, - // the webpack plugin takes care of injecting the dev client for us. - webpackDevClientEntry, - // Finally, this is your app's code: - paths.appIndexJs, - // We include the app code last so that if there is a runtime error during - // initialization, it doesn't blow up the WebpackDevServer client, and - // changing JS code would still trigger a refresh. - ] - : paths.appIndexJs, + entry: isEnvDevelopment && !shouldUseReactRefresh ? + [ + // Include an alternative client for WebpackDevServer. A client's job is to + // connect to WebpackDevServer by a socket and get notified about changes. + // When you save a file, the client will either apply hot updates (in case + // of CSS changes), or refresh the page (in case of JS changes). When you + // make a syntax error, this client will display a syntax error overlay. + // Note: instead of the default WebpackDevServer client, we use a custom one + // to bring better experience for Create React App users. You can replace + // the line below with these two lines if you prefer the stock client: + // + // require.resolve('webpack-dev-server/client') + '?/', + // require.resolve('webpack/hot/dev-server'), + // + // When using the experimental react-refresh integration, + // the webpack plugin takes care of injecting the dev client for us. + webpackDevClientEntry, + // Finally, this is your app's code: + paths.appIndexJs, + // We include the app code last so that if there is a runtime error during + // initialization, it doesn't blow up the WebpackDevServer client, and + // changing JS code would still trigger a refresh. + ] : + paths.appIndexJs, output: { // The build folder. path: isEnvProduction ? paths.appBuild : undefined, @@ -204,28 +202,28 @@ module.exports = function(webpackEnv) { pathinfo: isEnvDevelopment, // 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", + filename: isEnvProduction ? + "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", + chunkFilename: isEnvProduction ? + "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) => - path - .relative(paths.appSrc, info.absoluteResourcePath) - .replace(/\\/g, "/") - : isEnvDevelopment && - ((info) => - path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")), + devtoolModuleFilenameTemplate: isEnvProduction ? + (info) => + path + .relative(paths.appSrc, info.absoluteResourcePath) + .replace(/\\/g, "/") : + isEnvDevelopment && + ((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}`, @@ -281,19 +279,23 @@ module.exports = function(webpackEnv) { new OptimizeCSSAssetsPlugin({ cssProcessorOptions: { parser: safePostCssParser, - map: shouldUseSourceMap - ? { - // `inline: false` forces the sourcemap to be output into a - // separate file - inline: false, - // `annotation: true` appends the sourceMappingURL to the end of - // the css file, helping the browser find the sourcemap - annotation: true, - } - : false, + map: shouldUseSourceMap ? + { + // `inline: false` forces the sourcemap to be output into a + // separate file + inline: false, + // `annotation: true` appends the sourceMappingURL to the end of + // the css file, helping the browser find the sourcemap + annotation: true, + } : + false, }, cssProcessorPluginOptions: { - preset: ["default", { minifyFontValues: { removeQuotes: false } }], + preset: ["default", { + minifyFontValues: { + removeQuotes: false + } + }], }, }), ], @@ -365,18 +367,16 @@ module.exports = function(webpackEnv) { strictExportPresence: true, rules: [ // Disable require.ensure as it's not a standard language feature. - { parser: { requireEnsure: false } }, + { + parser: { + requireEnsure: false + } + }, { include: /node_modules/, test: /\.mjs$/, type: "javascript/auto", }, - { - test: /\.js$/, - // exclude: /node_modules/, // This is the line that caused the problem. Remove or comment it out. - enforce: "pre", - use: ["source-map-loader"], - }, { // "oneOf" will traverse all following loaders until one will // match the requirements. When no loader matches it will fall @@ -434,8 +434,7 @@ module.exports = function(webpackEnv) { { loaderMap: { svg: { - ReactComponent: - "@svgr/webpack?-svgo,+titleProp,+ref![path]", + ReactComponent: "@svgr/webpack?-svgo,+titleProp,+ref![path]", }, }, }, @@ -456,8 +455,8 @@ module.exports = function(webpackEnv) { }, ], isEnvDevelopment && - shouldUseReactRefresh && - require.resolve("react-refresh/babel"), + shouldUseReactRefresh && + 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/ @@ -481,7 +480,9 @@ module.exports = function(webpackEnv) { presets: [ [ require.resolve("babel-preset-react-app/dependencies"), - { helpers: true }, + { + helpers: true + }, ], ], cacheDirectory: true, @@ -507,9 +508,9 @@ module.exports = function(webpackEnv) { exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, - sourceMap: isEnvProduction - ? shouldUseSourceMap - : isEnvDevelopment, + sourceMap: isEnvProduction ? + shouldUseSourceMap : + isEnvDevelopment, }), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. @@ -523,9 +524,9 @@ module.exports = function(webpackEnv) { test: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, - sourceMap: isEnvProduction - ? shouldUseSourceMap - : isEnvDevelopment, + sourceMap: isEnvProduction ? + shouldUseSourceMap : + isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, }, @@ -537,12 +538,11 @@ module.exports = function(webpackEnv) { { test: sassRegex, exclude: sassModuleRegex, - use: getStyleLoaders( - { + use: getStyleLoaders({ importLoaders: 3, - sourceMap: isEnvProduction - ? shouldUseSourceMap - : isEnvDevelopment, + sourceMap: isEnvProduction ? + shouldUseSourceMap : + isEnvDevelopment, }, "sass-loader" ), @@ -556,12 +556,11 @@ module.exports = function(webpackEnv) { // using the extension .module.scss or .module.sass { test: sassModuleRegex, - use: getStyleLoaders( - { + use: getStyleLoaders({ importLoaders: 3, - sourceMap: isEnvProduction - ? shouldUseSourceMap - : isEnvDevelopment, + sourceMap: isEnvProduction ? + shouldUseSourceMap : + isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, }, @@ -595,36 +594,34 @@ module.exports = function(webpackEnv) { new Dotenv(), // Generates an `index.html` file with the