/* eslint-env node */ const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin') const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin') const { execSync } = require('child_process') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const path = require('path') const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin') const TerserPlugin = require('terser-webpack-plugin') const { IgnorePlugin, ProvidePlugin } = require('webpack') const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin') const commitHash = execSync('git rev-parse HEAD').toString().trim() const isProduction = process.env.NODE_ENV === 'production' process.env.REACT_APP_GIT_COMMIT_HASH = commitHash // Linting and type checking are only necessary as part of development and testing. // Omit them from production builds, as they slow down the feedback loop. const shouldLintOrTypeCheck = !isProduction function getCacheDirectory(cacheName) { // Include the trailing slash to denote that this is a directory. return `${path.join(__dirname, 'node_modules/.cache/', cacheName)}/` } module.exports = { eslint: { enable: shouldLintOrTypeCheck, pluginOptions(eslintConfig) { return Object.assign(eslintConfig, { cache: true, cacheLocation: getCacheDirectory('eslint'), ignorePath: '.gitignore', // Use our own eslint/plugins/config, as overrides interfere with caching. // This ensures that `yarn start` and `yarn lint` share one cache. eslintPath: require.resolve('eslint'), resolvePluginsRelativeTo: null, baseConfig: null, }) }, }, typescript: { enableTypeChecking: shouldLintOrTypeCheck, }, jest: { configure(jestConfig) { return Object.assign(jestConfig, { cacheDirectory: getCacheDirectory('jest'), transform: { ...Object.entries(jestConfig.transform).reduce((transform, [key, value]) => { if (value.match(/babel/)) return transform return { ...transform, [key]: value } }, {}), // Transform vanilla-extract using its own transformer. // See https://sandroroth.com/blog/vanilla-extract-cra#jest-transform. '\\.css\\.ts$': '@vanilla-extract/jest-transform', '\\.(t|j)sx?$': '@swc/jest', }, // Use d3-arrays's build directly, as jest does not support its exports. transformIgnorePatterns: ['d3-array'], moduleNameMapper: { 'd3-array': 'd3-array/dist/d3-array.min.js', }, }) }, }, webpack: { plugins: [ // Webpack 5 does not polyfill node globals, so we do so for those necessary: new ProvidePlugin({ // - react-markdown requires process.cwd process: 'process/browser.js', }), new VanillaExtractPlugin(), new RetryChunkLoadPlugin({ cacheBust: `function() { return 'cache-bust=' + Date.now(); }`, // Retries with exponential backoff (500ms, 1000ms, 2000ms). retryDelay: `function(retryAttempt) { return 2 ** (retryAttempt - 1) * 500; }`, maxRetries: 3, }), ], configure: (webpackConfig) => { // Configure webpack plugins: webpackConfig.plugins = webpackConfig.plugins .map((plugin) => { // CSS ordering is mitigated through scoping / naming conventions, so we can ignore order warnings. // See https://webpack.js.org/plugins/mini-css-extract-plugin/#remove-order-warnings. if (plugin instanceof MiniCssExtractPlugin) { plugin.options.ignoreOrder = true } // Disable TypeScript's config overwrite, as it interferes with incremental build caching. // This ensures that `yarn start` and `yarn typecheck` share one cache. if (plugin.constructor.name == 'ForkTsCheckerWebpackPlugin') { delete plugin.options.typescript.configOverwrite } return plugin }) .filter((plugin) => { // Case sensitive paths are already enforced by TypeScript. // See https://www.typescriptlang.org/tsconfig#forceConsistentCasingInFileNames. if (plugin instanceof CaseSensitivePathsPlugin) return false // IgnorePlugin is used to tree-shake moment locales, but we do not use moment in this project. if (plugin instanceof IgnorePlugin) return false return true }) // Configure webpack resolution: webpackConfig.resolve = Object.assign(webpackConfig.resolve, { plugins: webpackConfig.resolve.plugins.map((plugin) => { // Allow vanilla-extract in production builds. // This is necessary because create-react-app guards against external imports. // See https://sandroroth.com/blog/vanilla-extract-cra#production-build. if (plugin instanceof ModuleScopePlugin) { plugin.allowedPaths.push(path.join(__dirname, 'node_modules/@vanilla-extract/webpack-plugin')) } return plugin }), // Webpack 5 does not resolve node modules, so we do so for those necessary: fallback: { // - react-markdown requires path path: require.resolve('path-browserify'), }, }) // Configure webpack transpilation (create-react-app specifies transpilation rules in a oneOf): webpackConfig.module.rules[1].oneOf = webpackConfig.module.rules[1].oneOf.map((rule) => { if (rule.loader && rule.loader.match(/babel-loader/)) { rule.loader = 'swc-loader' delete rule.options } return rule }) // Configure webpack optimization: webpackConfig.optimization = Object.assign( webpackConfig.optimization, { minimize: isProduction, minimizer: [ new TerserPlugin({ minify: TerserPlugin.swcMinify, parallel: require('os').cpus().length, }), ], }, isProduction ? { splitChunks: { // Cap the chunk size to 5MB. // react-scripts suggests a chunk size under 1MB after gzip, but we can only measure maxSize before gzip. // react-scripts also caps cacheable chunks at 5MB, which gzips to below 1MB, so we cap chunk size there. // See https://github.com/facebook/create-react-app/blob/d960b9e/packages/react-scripts/config/webpack.config.js#L713-L716. maxSize: 5 * 1024 * 1024, // Optimize over all chunks, instead of async chunks (the default), so that initial chunks are also optimized. chunks: 'all', }, } : {} ) // Configure webpack resolution. webpackConfig.cache is unused with swc-loader, but the resolver can still cache: webpackConfig.resolve = Object.assign(webpackConfig.resolve, { unsafeCache: true }) webpackConfig.ignoreWarnings = [ // Source mappings for a package will fail if the package does not provide them, but the build will still succeed, // so it is unnecessary (and bothersome) to log it. This should be turned off when debugging missing sourcemaps. // See https://webpack.js.org/loaders/source-map-loader#ignoring-warnings. /Failed to parse source map/, ] return webpackConfig }, }, }