diff --git a/config/webpack.config.js b/config/webpack.config.js index 7f0e9b18..c84e085b 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -86,11 +86,11 @@ module.exports = function(webpackEnv) { isEnvDevelopment && require.resolve("style-loader"), isEnvProduction && { loader: MiniCssExtractPlugin.loader, - options: shouldUseRelativeAssetPaths ? { publicPath: "../../" } : {} + options: shouldUseRelativeAssetPaths ? { publicPath: "../../" } : {}, }, { loader: require.resolve("css-loader"), - options: cssOptions + options: cssOptions, }, { // Options for PostCSS as we reference these options twice @@ -105,32 +105,32 @@ module.exports = function(webpackEnv) { require("postcss-flexbugs-fixes"), require("postcss-preset-env")({ autoprefixer: { - flexbox: "no-2009" + flexbox: "no-2009", }, - stage: 3 + stage: 3, }), // Adds PostCSS Normalize as the reset css with default options, // so that it honors browserslist config in package.json // which in turn let's users customize the target behavior as per their needs. - postcssNormalize() + postcssNormalize(), ], - sourceMap: isEnvProduction && shouldUseSourceMap - } - } + sourceMap: isEnvProduction && shouldUseSourceMap, + }, + }, ].filter(Boolean); if (preProcessor) { loaders.push( { loader: require.resolve("resolve-url-loader"), options: { - sourceMap: isEnvProduction && shouldUseSourceMap - } + sourceMap: isEnvProduction && shouldUseSourceMap, + }, }, { loader: require.resolve(preProcessor), options: { - sourceMap: true - } + sourceMap: true, + }, } ); } @@ -162,7 +162,7 @@ module.exports = function(webpackEnv) { isEnvDevelopment && require.resolve("react-dev-utils/webpackHotDevClient"), // Finally, this is your app's code: - paths.appIndexJs + 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. @@ -188,18 +188,19 @@ module.exports = function(webpackEnv) { publicPath: publicPath, // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: isEnvProduction - ? info => + ? (info) => path .relative(paths.appSrc, info.absoluteResourcePath) .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, @@ -213,7 +214,7 @@ module.exports = function(webpackEnv) { // into invalid ecma 5 code. This is why the 'compress' and 'output' // sections only apply transformations that are ecma 5 safe // https://github.com/facebook/create-react-app/pull/4234 - ecma: 8 + ecma: 8, }, compress: { ecma: 5, @@ -227,10 +228,10 @@ module.exports = function(webpackEnv) { // https://github.com/facebook/create-react-app/issues/5250 // Pending further investigation: // https://github.com/terser-js/terser/issues/120 - inline: 2 + inline: 2, }, mangle: { - safari10: true + safari10: true, }, // Added for profiling in devtools keep_classnames: isEnvProductionProfile, @@ -240,8 +241,8 @@ module.exports = function(webpackEnv) { comments: false, // Turned on because emoji and regex is not minified properly using default // https://github.com/facebook/create-react-app/issues/2488 - ascii_only: true - } + ascii_only: true, + }, }, // Use multi-process parallel running to improve the build speed // Default number of concurrent runs: os.cpus().length - 1 @@ -250,7 +251,7 @@ module.exports = function(webpackEnv) { parallel: !isWsl, // Enable file caching cache: true, - sourceMap: shouldUseSourceMap + sourceMap: shouldUseSourceMap, }), // This is only used in production mode new OptimizeCSSAssetsPlugin({ @@ -263,25 +264,25 @@ module.exports = function(webpackEnv) { inline: false, // `annotation: true` appends the sourceMappingURL to the end of // the css file, helping the browser find the sourcemap - annotation: true + annotation: true, } - : false - } - }) + : false, + }, + }), ], // Automatically split vendor and commons // https://twitter.com/wSokra/status/969633336732905474 // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366 splitChunks: { chunks: "all", - name: false + name: false, }, // 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: { // This allows you to set a fallback for where Webpack should look for modules. @@ -298,8 +299,8 @@ 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/ @@ -307,9 +308,9 @@ module.exports = function(webpackEnv) { // Allows for better profiling with ReactDevTools ...(isEnvProductionProfile && { "react-dom$": "react-dom/profiling", - "scheduler/tracing": "scheduler/tracing-profiling" + "scheduler/tracing": "scheduler/tracing-profiling", }), - ...(modules.webpackAliases || {}) + ...(modules.webpackAliases || {}), }, plugins: [ // Adds support for installing with Plug'n'Play, leading to faster installs and adding @@ -320,15 +321,15 @@ module.exports = function(webpackEnv) { // To fix this, we prevent you from importing files out of src/ -- if you'd like to, // please link the files into your node_modules/ and let module-resolution kick in. // Make sure your source files are compiled, as they will not be processed in any way. - new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]) - ] + new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]), + ], }, resolveLoader: { plugins: [ // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders // from the current package. - PnpWebpackPlugin.moduleLoader(module) - ] + PnpWebpackPlugin.moduleLoader(module), + ], }, module: { strictExportPresence: true, @@ -347,21 +348,60 @@ module.exports = function(webpackEnv) { cache: true, formatter: require.resolve("react-dev-utils/eslintFormatter"), eslintPath: require.resolve("eslint"), - resolvePluginsRelativeTo: __dirname + resolvePluginsRelativeTo: __dirname, }, - loader: require.resolve("eslint-loader") - } + loader: require.resolve("eslint-loader"), + }, ], - include: paths.appSrc + include: paths.appSrc, }, - // We nest everything inside a oneOf, because worklets need special processing. + // We nest everything inside a oneOf, because worklets and workers need special processing. { oneOf: [ + { + test: /\.worker\.(js|ts)$/, + use: [ + { + loader: "worker-loader", + }, + // Run workers through babel + // because of course webpack applies loaders right-to-left + { + loader: require.resolve("babel-loader"), + options: { + customize: require.resolve( + "babel-preset-react-app/webpack-overrides" + ), + + plugins: [ + [ + require.resolve("babel-plugin-named-asset-import"), + { + loaderMap: { + svg: { + ReactComponent: + "@svgr/webpack?-svgo,+titleProp,+ref![path]", + }, + }, + }, + ], + ], + // This is a feature of `babel-loader` for webpack (not Babel itself). + // It enables caching results in ./node_modules/.cache/babel-loader/ + // directory for faster rebuilds. + cacheDirectory: true, + // See #6846 for context on why cacheCompression is disabled + cacheCompression: false, + compact: isEnvProduction, + }, + }, + ], + }, { test: /\.worklet\.(js|ts)$/, use: [ { - loader: "worklet-loader" + loader: "worklet-loader", }, // Run worklets through babel // because of course webpack applies loaders right-to-left @@ -379,11 +419,11 @@ module.exports = function(webpackEnv) { loaderMap: { svg: { ReactComponent: - "@svgr/webpack?-svgo,+titleProp,+ref![path]" - } - } - } - ] + "@svgr/webpack?-svgo,+titleProp,+ref![path]", + }, + }, + }, + ], ], // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ @@ -391,10 +431,10 @@ module.exports = function(webpackEnv) { cacheDirectory: true, // See #6846 for context on why cacheCompression is disabled cacheCompression: false, - compact: isEnvProduction - } + compact: isEnvProduction, + }, }, - ] + ], }, { // "oneOf" will traverse all following loaders until one will @@ -409,8 +449,8 @@ module.exports = function(webpackEnv) { loader: require.resolve("url-loader"), options: { limit: imageInlineSizeLimit, - name: "static/media/[name].[hash:8].[ext]" - } + name: "static/media/[name].[hash:8].[ext]", + }, }, // Process application JS with Babel. // The preset includes JSX, Flow, TypeScript, and some ESnext features. @@ -430,11 +470,11 @@ module.exports = function(webpackEnv) { loaderMap: { svg: { ReactComponent: - "@svgr/webpack?-svgo,+titleProp,+ref![path]" - } - } - } - ] + "@svgr/webpack?-svgo,+titleProp,+ref![path]", + }, + }, + }, + ], ], // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ @@ -442,8 +482,8 @@ module.exports = function(webpackEnv) { cacheDirectory: true, // See #6846 for context on why cacheCompression is disabled cacheCompression: false, - compact: isEnvProduction - } + compact: isEnvProduction, + }, }, // Process any JS outside of the app with Babel. // Unlike the application JS, we only compile the standard ES features. @@ -458,8 +498,8 @@ module.exports = function(webpackEnv) { presets: [ [ require.resolve("babel-preset-react-app/dependencies"), - { helpers: true } - ] + { helpers: true }, + ], ], cacheDirectory: true, // See #6846 for context on why cacheCompression is disabled @@ -469,8 +509,8 @@ module.exports = function(webpackEnv) { // because it was compiled. Thus, we don't want the browser // debugger to show the original code. Instead, the code // being evaluated would be much more helpful. - sourceMaps: false - } + sourceMaps: false, + }, }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. @@ -484,13 +524,13 @@ module.exports = function(webpackEnv) { exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, - sourceMap: isEnvProduction && shouldUseSourceMap + sourceMap: isEnvProduction && shouldUseSourceMap, }), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 - sideEffects: true + sideEffects: true, }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css @@ -500,8 +540,8 @@ module.exports = function(webpackEnv) { importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, - getLocalIdent: getCSSModuleLocalIdent - }) + getLocalIdent: getCSSModuleLocalIdent, + }), }, // Opt-in support for SASS (using .scss or .sass extensions). // By default we support SASS Modules with the @@ -512,7 +552,7 @@ module.exports = function(webpackEnv) { use: getStyleLoaders( { importLoaders: 2, - sourceMap: isEnvProduction && shouldUseSourceMap + sourceMap: isEnvProduction && shouldUseSourceMap, }, "sass-loader" ), @@ -520,7 +560,7 @@ module.exports = function(webpackEnv) { // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 - sideEffects: true + sideEffects: true, }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass @@ -531,10 +571,10 @@ module.exports = function(webpackEnv) { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, - getLocalIdent: getCSSModuleLocalIdent + getLocalIdent: getCSSModuleLocalIdent, }, "sass-loader" - ) + ), }, // "file" loader makes sure those assets get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. @@ -549,16 +589,16 @@ module.exports = function(webpackEnv) { // 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? // Make sure to add the new loader(s) before the "file" loader. - ] - } - ] - } - ] + ], + }, + ], + }, + ], }, plugins: [ // Generates an `index.html` file with the