WIP: add webpack bundle analyzer

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

@@ -199,6 +199,14 @@ module.exports = {
           cacheDirectory: true,
         },
       },
+      // "source-map-loader" will look for .js.map files within dependencies and
+      // use the maps during development. This allows us to see the source code
+      // for dependencies as we develop our app.
+      {
+        test: /\.js$/,
+        use: ["source-map-loader"],
+        enforce: "pre"
+      },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.
       // "style" loader turns CSS into JS modules that inject <style> tags.

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

@@ -20,6 +20,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
@@ -336,6 +337,9 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    // Webpack Bundle Analyzer shows you your output when building your app for production.
+    // Analyzer settings can be found at https://github.com/th0r/webpack-bundle-analyzer
+    new BundleAnalyzerPlugin()
   ],
   // 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.

packages/react-scripts/package.json

@@ -50,10 +50,12 @@
     "promise": "7.1.1",
     "react-dev-utils": "^2.0.1",
     "react-error-overlay": "^1.0.6",
+    "source-map-loader": "^0.2.1",
     "style-loader": "0.17.0",
     "sw-precache-webpack-plugin": "0.9.1",
     "url-loader": "0.5.8",
     "webpack": "2.6.0",
+    "webpack-bundle-analyzer": "^2.8.2",
     "webpack-dev-server": "2.4.5",
     "webpack-manifest-plugin": "1.1.0",
     "whatwg-fetch": "2.0.3"