feat: add bundle analyzer, hot loader, fix tests

Author: Idered

packages/react-scripts/config/webpack.config.js

@@ -34,6 +34,7 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const SentryWebpackPlugin = require('@sentry/webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 // @remove-on-eject-begin
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
@@ -422,6 +423,7 @@ module.exports = function(webpackEnv) {
                 ),
                 // @remove-on-eject-end
                 plugins: [
+                  require.resolve('react-hot-loader/babel'),
                   [
                     require.resolve('babel-plugin-named-asset-import'),
                     {
@@ -615,6 +617,11 @@ module.exports = function(webpackEnv) {
       new webpack.DefinePlugin(env.stringified),
       // This is necessary to emit hot updates (currently CSS only):
       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+      isEnvDevelopment &&
+        new BundleAnalyzerPlugin({
+          openAnalyzer: false,
+          logLevel: 'warn',
+        }),
       // Watcher doesn't work well if you mistype casing in a path so we use
       // a plugin that prints an error when you attempt to do this.
       // See https://github.com/facebook/create-react-app/issues/240

packages/react-scripts/package.json

@@ -65,6 +65,7 @@
     "postcss-safe-parser": "4.0.1",
     "react-app-polyfill": "^0.2.2",
     "react-dev-utils": "^8.0.0",
+    "react-hot-loader": "^4.8.0",
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
     "style-loader": "0.23.1",

packages/react-scripts/scripts/start.js

@@ -42,10 +42,13 @@ const {
   createCompiler,
   prepareProxy,
   prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
+} = require('./utils/webpackDevServerUtils');
 const paths = require('../config/paths');
 const configFactory = require('../config/webpack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
+const { setConfig } = require('react-hot-loader');
+
+setConfig({ logLevel: 'none' });
 
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;

packages/react-scripts/scripts/test.js

@@ -82,7 +82,7 @@ argv.push(
   JSON.stringify(
     createJestConfig(
       relativePath => path.resolve(__dirname, '..', relativePath),
-      path.resolve(paths.appSrc, '..'),
+      path.resolve(paths.workspaces, '..'),
       false
     )
   )

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -22,7 +22,10 @@ module.exports = (resolve, rootDir, isEjecting) => {
     : undefined;
 
   const config = {
-    collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
+    collectCoverageFrom: [
+      '<rootDir>/**/*.{js,jsx,ts,tsx}',
+      '!<rootDir>/**/*.d.ts',
+    ],
 
     setupFiles: [
       isEjecting
@@ -32,8 +35,8 @@ module.exports = (resolve, rootDir, isEjecting) => {
 
     setupFilesAfterEnv: setupTestsFile ? [setupTestsFile] : [],
     testMatch: [
-      '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
-      '<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}',
+      '<rootDir>/**/__tests__/**/*.{js,jsx,ts,tsx}',
+      '<rootDir>/**/?(*.)(spec|test).{js,jsx,ts,tsx}',
     ],
     testEnvironment: 'jsdom',
     testURL: 'http://localhost',