Merge pull request #236 from code-dot-org/cpirich/shrink-main-webpack-by-using-externals

Shrink main.js from webpack by using externals

Author: cpirich

package.json

@@ -26,6 +26,12 @@
   },
   "author": "",
   "license": "Apache-2.0",
+  "peerDependencies": {
+    "lodash": "^4.17.5",
+    "radium": "^0.25.2",
+    "react": "~15.4.0",
+    "react-dom": "~15.4.0"
+  },
   "devDependencies": {
     "@tensorflow-models/knn-classifier": "~1.1.0",
     "@tensorflow-models/mobilenet": "^2.0.4",
@@ -55,23 +61,20 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^15.0.0",
     "jquery": "1.12.1",
-    "jquery-ui": "^1.12.1",
-    "jquery-ui-touch-punch": "^0.2.3",
     "lodash": "^4.17.5",
     "mem": ">=4.0.0",
     "node-fetch": "^2.6.0",
     "prettier": "1.16.1",
     "query-string": "4.1.0",
     "radium": "^0.25.2",
     "react": "~15.4.0",
-    "react-bootstrap": "0.30.1",
-    "react-color": "^2.17.3",
     "react-dom": "~15.4.0",
     "react-test-renderer": "~15.4.0",
     "style-loader": "^1.0.0",
     "svm": "uponthesun/svmjs",
     "url-loader": "^2.2.0",
     "webpack": "4.19.1",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.1.4",
     "yargs": "^14.0.0"

webpack.config.js

@@ -1,16 +1,11 @@
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 
-module.exports = {
+const commonConfig = {
   devtool: 'eval-cheap-module-source-map',
   resolve: {
     extensions: ['.js', '.jsx'],
   },
-  entry: {
-    assetPath: './src/demo/assetPath.js',
-    main: './src/index.js',
-    demo: './src/demo/index.jsx',
-  },
   output: {
     filename: '[name].js',
     libraryTarget: 'umd',
@@ -76,7 +71,10 @@ module.exports = {
     },
     maxAssetSize: 300000,
     maxEntrypointSize: 10500000,
-  },
+  }
+};
+
+const firstConfigOnly = {
   plugins: [
     new CleanWebpackPlugin(),
     new CopyPlugin([{
@@ -86,3 +84,50 @@ module.exports = {
     }]),
   ],
 };
+
+const externalConfig = {
+  externals: {
+    "lodash": "lodash",
+    "radium": "radium",
+    "react": "react",
+    "react-dom": "react-dom",
+  }
+};
+
+const defaultConfig = [
+  {
+    entry: {
+      assetPath: './src/demo/assetPath.js'
+    },
+    ...commonConfig,
+    ...firstConfigOnly,
+    ...externalConfig
+  },
+  {
+    entry: {
+      demo: './src/demo/index.jsx'
+    },
+    ...commonConfig
+  }
+];
+
+const productionConfig = [
+  {
+    entry: {
+      main: './src/index.js'
+    },
+    ...commonConfig,
+    ...externalConfig
+  }
+];
+
+module.exports = (env, argv) => {
+  if (argv.mode === 'production') {
+    return [
+      ...defaultConfig,
+      ...productionConfig,
+    ];
+  }
+
+  return defaultConfig;
+};