optimize webpack and other minor changes

webpack.config.js

@@ -1,55 +1,52 @@
+/*********************************
+ *       import webpack plugins
+ ********************************/
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const GasPlugin = require('gas-webpack-plugin');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const WebpackCleanPlugin = require('webpack-clean');
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
+const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
 
-// settings
+/*********************************
+ *       define file paths
+ ********************************/
 const destination = 'dist';
 const htmlTemplate = './src/client/dialog-template.html';
-const htmlWebpackInlineSourcePlugin = new HtmlWebpackInlineSourcePlugin();
-const webpackCleanPlugin = new WebpackCleanPlugin([
-  destination + '/' + 'main.js',
-]);
 
-// Client entrypoints:
+/*********************************
+ *    client entry point paths
+ ********************************/
 const clientEntrypoints = [
   {
-    name: "CLIENT - main dialog",
-    entry: "./src/client/main.jsx",
-    filename: "main.html"
+    name: 'CLIENT - main dialog',
+    entry: './src/client/main.jsx',
+    filename: 'main.html',
   },
   {
-    name: "CLIENT - about sidebar",
-    entry: "./src/client/about.jsx",
-    filename: "about.html"
+    name: 'CLIENT - about sidebar',
+    entry: './src/client/about.jsx',
+    filename: 'about.html',
   },
 ];
 
+/*********************************
+ *       Declare settings
+ ********************************/
+
+// any shared client & server settings
 const sharedConfigSettings = {
-  optimization: {
-    minimizer: [
-      new UglifyJSPlugin({
-        uglifyOptions: {
-          warnings: false,
-          ie8: true,
-          mangle: false,
-          compress: {
-            properties: false
-          },
-          output: {
-            beautify: true
-          }
-        }
-      })
-    ]
+  performance: {
+    hints: 'warning',
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
   },
-  module: {},
 };
 
+// eslint settings, to check during build if desired
 const eslintConfig = {
   enforce: 'pre',
   test: /\.jsx?$/,
@@ -58,51 +55,55 @@ const eslintConfig = {
   options: {
     cache: false,
     failOnError: false,
-    fix: true
-  }
+    fix: true,
+  },
 };
 
+// appscript copy settings, to copy this file over to the destination directory
 const appsscriptConfig = {
-  name: "COPY APPSSCRIPT.JSON",
-  entry: "./appsscript.json",
+  name: 'COPY APPSSCRIPT.JSON',
+  entry: './appsscript.json',
   plugins: [
     new CleanWebpackPlugin([destination]),
     new CopyWebpackPlugin([
       {
-        from: './appsscript.json'
-      }
-    ])
-  ]
+        from: './appsscript.json',
+      },
+    ]),
+  ],
 };
 
+// config shared for all client settings
 const clientConfig = {
   ...sharedConfigSettings,
   output: {
     path: path.resolve(__dirname, destination),
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.json']
+    extensions: ['.js', '.jsx', '.json'],
   },
   module: {
     rules: [
+      // turned off by default, but uncomment below to run linting during build
       // eslintConfig,
       {
-        test: /\.jsx$/,
+        test: /\.jsx?$/,
         exclude: /node_modules/,
         use: {
-          loader: "babel-loader"
-        }
+          loader: 'babel-loader',
+        },
       },
       {
         test: /\.css$/,
-        use: [ 'style-loader', 'css-loader' ]
-      }
+        use: ['style-loader', 'css-loader'],
+      },
     ],
   },
 };
 
-const clientConfigs = clientEntrypoints.map((clientEntrypoint) => {
-  return ({
+// config for EACH client entrypoint
+const clientConfigs = clientEntrypoints.map(clientEntrypoint => {
+  return {
     ...clientConfig,
     name: clientEntrypoint.name,
     entry: clientEntrypoint.entry,
@@ -110,42 +111,71 @@ const clientConfigs = clientEntrypoints.map((clientEntrypoint) => {
       new HtmlWebpackPlugin({
         template: htmlTemplate,
         filename: clientEntrypoint.filename,
-        inlineSource: '.(js|css)$' // embed all javascript and css inline
+        inlineSource: '^[^(//)]+.(js|css)$', // embed all js and css inline, exclude packages with '//' for dynamic cdn insertion
       }),
-      htmlWebpackInlineSourcePlugin,
-      webpackCleanPlugin,
+      new HtmlWebpackInlineSourcePlugin(),
+      new WebpackCleanPlugin([path.join(destination, 'main.js')]),
+      new DynamicCdnWebpackPlugin(),
     ],
-  })
+  };
 });
 
 const serverConfig = {
   ...sharedConfigSettings,
-  name: "SERVER",
-  entry: "./src/server/code.js",
+  name: 'SERVER',
+  entry: './src/server/code.js',
   output: {
     filename: 'code.js',
     path: path.resolve(__dirname, destination),
-    libraryTarget: 'this'
+    libraryTarget: 'this',
   },
   module: {
     rules: [
+      // turned off by default, but uncomment below to run linting during build
       // eslintConfig,
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
-          loader: "babel-loader"
-        }
+          loader: 'babel-loader',
+        },
       },
     ],
   },
-  plugins: [
-    new GasPlugin()
-  ]
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        sourceMap: true,
+        terserOptions: {
+          ecma: undefined,
+          warnings: false,
+          parse: {},
+          compress: {
+            properties: false,
+          },
+          mangle: false,
+          module: false,
+          output: {
+            beautify: true,
+          },
+          toplevel: false,
+          nameCache: null,
+          ie8: true,
+          keep_classnames: undefined,
+          keep_fnames: false,
+          safari10: false,
+        },
+      }),
+    ],
+  },
+  plugins: [new GasPlugin()],
 };
 
 module.exports = [
+  // 1. Copy the appscript file.
   appsscriptConfig,
+  // 2. One client bundle for each client entrypoint.
   ...clientConfigs,
+  // 3. Bundle the server
   serverConfig,
 ];