Add manifest plugin and tweak webpack config

cahamilton · Jun 1, 2020 · a981816 · a981816
1 parent bc3af4c
commit a981816
Show file tree

Hide file tree

Showing 6 changed files with 264 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,4 @@
 coverage
 public/stylesheets
 public/scripts
+rev-manifest.json
diff --git a/package.json b/package.json
@@ -101,10 +101,12 @@
     "stylelint-config-css-modules": "^2.2.0",
     "stylelint-config-property-sort-order-smacss": "^6.0.0",
     "stylelint-config-standard": "^20.0.0",
+    "terser-webpack-plugin": "^3.0.2",
     "ts-loader": "^7.0.4",
     "typescript": "^3.9.3",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.10.3",
+    "webpack-manifest-plugin": "^2.2.0"
   },
   "husky": {
     "hooks": {

diff --git a/routes/index.js b/routes/index.js
@@ -4,13 +4,26 @@ const express = require('express');
 
 const router = express.Router();
 const isProduction = require('../helpers/isProduction');
+const manifest = require('../rev-manifest.json');
+
+/**
+ * @param filename
+ * @return {string}
+ */
+const getAssetPath = (filename) => {
+  const basePath = isProduction ? '/' : 'http://localhost:8080/';
+
+  if (!manifest[filename]) {
+    return `${basePath}${filename}`;
+  }
+
+  return `${basePath}${manifest[filename]}`;
+};
 
 router.get('/', (req, res) => {
   res.render('index', {
     title: 'MusicMashup - Your tasteful resource for music knowledge!',
-    asset: {
-      basePath: isProduction ? '/' : 'http://localhost:8080/',
-    },
+    getAssetPath,
   });
 });
 

diff --git a/views/index.ejs b/views/index.ejs
@@ -9,12 +9,15 @@
 
   <title><%= title %></title>
 
-  <link rel="stylesheet" href="<%= asset.basePath %>stylesheets/mashup.css">
-  <link rel="apple-touch-icon" href="<%= asset.basePath %>apple-touch-icon.png">
+  <link rel="stylesheet" href="<%= getAssetPath('vendor.css') %>">
+  <link rel="stylesheet" href="<%= getAssetPath('mashup.css') %>">
+  <link rel="apple-touch-icon" href="<%= getAssetPath('apple-touch-icon.png') %>">
 </head>
 
 <body>
   <div id="musicMashup"></div>
-  <script type="text/javascript" src="<%= asset.basePath %>scripts/mashup.js"></script>
+  <script type="text/javascript" src="<%= getAssetPath('runtime.js') %>"></script>
+  <script type="text/javascript" src="<%= getAssetPath('vendor.js') %>"></script>
+  <script type="text/javascript" src="<%= getAssetPath('mashup.js') %>"></script>
 </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,19 +3,31 @@
 const path = require('path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ManifestPlugin = require('webpack-manifest-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const isProduction = require('./helpers/isProduction');
 
 module.exports = {
+  mode: isProduction //
+    ? 'production'
+    : 'development',
   context: path.join(__dirname, '/assets/'),
+  devtool: isProduction //
+    ? 'cheap-source-map'
+    : 'source-map',
   entry: {
     mashup: ['./scripts/index'],
   },
   output: {
-    path: path.join(__dirname, '/public/'),
-    publicPath: isProduction ? '/' : 'http://localhost:8080/',
-    filename: './scripts/[name].js',
-    chunkFilename: './scripts/[name].[chunkhash].js',
+    path: path.join(__dirname, '/public'),
+    publicPath: '',
+    filename: !isProduction //
+      ? 'scripts/[name].js'
+      : 'scripts/[name].[chunkhash].js',
+    chunkFilename: !isProduction //
+      ? 'scripts/[name].js'
+      : 'scripts/[name].[chunkhash].js',
   },
   devServer: {
     compress: true,
@@ -70,20 +82,46 @@ module.exports = {
     ],
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
+    new ManifestPlugin({
+      fileName: path.join(__dirname, 'rev-manifest.json'),
+      writeToFileEmit: !isProduction,
+    }),
     new webpack.SourceMapDevToolPlugin({
       filename: '[file].map',
-      exclude: './scripts/mashup.js',
+      exclude: 'scripts/mashup.js',
     }),
     new MiniCssExtractPlugin({
-      filename: isProduction
-        ? './stylesheets/[name].[hash].css'
-        : './stylesheets/[name].css',
-      chunkFilename: isProduction
-        ? './stylesheets/[id].[hash].css'
-        : './stylesheets/[id].css',
+      filename: !isProduction
+        ? 'stylesheets/[name].css'
+        : 'stylesheets/[name].[chunkhash].css',
+      chunkFilename: !isProduction
+        ? 'stylesheets/[name].css'
+        : 'stylesheets/[name].[chunkhash].css',
     }),
   ],
+  optimization: {
+    minimize: isProduction,
+    minimizer: [
+      new TerserPlugin({
+        cache: true, //
+        parallel: true,
+        sourceMap: true,
+      }),
+    ],
+    splitChunks: {
+      minSize: 10000,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendor',
+          chunks: 'all',
+        },
+      },
+    },
+    runtimeChunk: {
+      name: 'runtime',
+    },
+  },
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
   },