euchre-live

commit 63f7c32876dcea2cce61558c436c022fc9cef031 (patch)
parent a421691d83da2b76b2f879d24fbf26c6554a41b6
Author: Alex Karle <alex@karle.co>
Date:   Tue, 26 May 2020 18:46:06 -0400

make: Build production webpack JS on `build` target

Previously, we only built the development version. It came to my
attention today that the development version is 8MB and the production
version is 400KB, so we should really be using production.. in
production (surprise?).

This commit updates the `make build` recipe to build the production
webpack bundle, which has been renamed to be just webpack.production.js
(to allow it to be referenced statically).

The HtmlWebpackPlugin previously in use was actually generating a
webpack.production.html that referenced webpack.SHA.js, but for now
(MVP), we'll stick to our static index.html. (This generation seems
necessary for Mojolicious::Webpack::Plugin though)

Diffstat:
M
Makefile
 | 
2
+-
A
bin/build.sh
 | 
20
++++++++++++++++++++
M
webpack.config.js
 | 
4
++--

3 files changed, 23 insertions(+), 3 deletions(-)
diff --git a/Makefile b/Makefile
@@ -20,7 +20,7 @@ test:
 # We make this timestamp file the dependency for build to
 # ensure we don't do it too often...
 .public.ts: $(JS_FILES) $(PUBLIC_FILES)
-	env MOJO_WEBPACK_VERBOSE=1 MOJO_WEBPACK_BUILD=1 ./gloat.pl routes
+	./bin/build.sh
 	touch .public.ts
 
 # Only rebuild if any of public/ or the Perl stuff has changed
diff --git a/bin/build.sh b/bin/build.sh
@@ -0,0 +1,20 @@
+#!/bin/sh
+# build.sh -- build the webpack assets pre-deployment
+set -e
+die() {
+    echo "$1" 1>&2
+    exit 1
+}
+
+[ -e "gloat.pl" ] || die "Not in root of euchre-live"
+
+export MOJO_WEBPACK_VERBOSE=1
+export MOJO_WEBPACK_BUILD=1
+
+echo ">>> Building Development Version"
+MOJO_MODE=development ./gloat.pl routes
+
+echo ">>> Building Production Version"
+MOJO_MODE=production ./gloat.pl routes
+
+echo ">>> Build Success! <<<"
diff --git a/webpack.config.js b/webpack.config.js
@@ -19,7 +19,7 @@ const config = {
     minimizer: []
   },
   output: {
-    filename: isDev ? '[name].development.js' : '[name].[chunkhash].js',
+    filename: isDev ? '[name].development.js' : '[name].production.js',
     path: outDir
   },
   plugins: [
@@ -58,7 +58,7 @@ if (process.env.WEBPACK_RULE_FOR_JS) {
 if (process.env.WEBPACK_RULE_FOR_CSS || process.env.WEBPACK_RULE_FOR_SASS) {
   var MiniCssExtractPlugin = require('mini-css-extract-plugin');
   config.plugins.push(new MiniCssExtractPlugin({
-    filename: isDev ? '[name].development.css' : '[name].[contenthash].css',
+    filename: isDev ? '[name].development.css' : '[name].production.css',
   }));
 
   const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');