Switched build process back to Webpack

.banner

@@ -1,3 +0,0 @@
-{#-
-  This file was automatically generated - do not edit
--#}

Makefile

@@ -1,196 +0,0 @@
-# Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
-
-# Permission is hereby granted, free of charge, to any person obtaining a copy
-# of this software and associated documentation files (the "Software"), to
-# deal in the Software without restriction, including without limitation the
-# rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
-# sell copies of the Software, and to permit persons to whom the Software is
-# furnished to do so, subject to the following conditions:
-
-# The above copyright notice and this permission notice shall be included in
-# all copies or substantial portions of the Software.
-
-# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-# FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
-# IN THE SOFTWARE.
-
-all: clean lint build
-
-# -----------------------------------------------------------------------------
-# Constants
-# -----------------------------------------------------------------------------
-
-# Directory for NPM executables
-BIN = $(shell npm bin)
-
-# Node environment
-NODE_ENV ?= production
-
-# -----------------------------------------------------------------------------
-# Rules
-# -----------------------------------------------------------------------------
-
-# Build distribution files
-build: material
-
-# Clean distribution files
-clean:
-	rm -rf material
-
-# Lint source files
-lint:
-	${BIN}/tslint -p tsconfig.json "src/**/*.ts"
-	${BIN}/stylelint `find src/assets -name *.scss`
-
-# Start development server
-start:
-	@ NODE_ENV=development ${BIN}/nodemon --quiet \
-		--watch . --watch src --ext html,scss,ts,tsx \
-		--exec make build
-
-# -----------------------------------------------------------------------------
-# Targets
-# -----------------------------------------------------------------------------
-
-# Create top-level build directory
-material/.:
-	@ echo "+ $@"
-	@ mkdir -p $@
-
-# Create secondary build directory
-material%/.:
-	@ echo "+ $@"
-	@ mkdir -p $@
-
-# -----------------------------------------------------------------------------
-
-# Expand prerequisites twice
-.SECONDEXPANSION:
-
-# -----------------------------------------------------------------------------
-
-# Web font specimen
-FONTS_SPECIMEN = src/assets/fonts/specimen
-material/assets/fonts/specimen: ${FONTS_SPECIMEN} | $$(@D)/.
-	@ echo "+ $@"
-	@ cp -r $< $@
-
-# Web fonts
-FONTS = $(subst src,material,$(wildcard src/assets/fonts/*.css))
-material/assets/fonts: $$@/specimen ${FONTS}
-material/assets/fonts/%.css: src/assets/fonts/%.css | $$(@D)/.
-	@ echo "+ $@"
-	@ ${BIN}/csso $< -o $@
-
-# -----------------------------------------------------------------------------
-
-# Icons (FontAwesome) - add *.html suffix or MkDocs will bundle everything
-IMAGES_ICONS_FONTAWESOME = node_modules/@fortawesome/fontawesome-free/svgs
-material/assets/images/icons/fontawesome: ${IMAGES_ICONS_FONTAWESOME} | $$(@D)/.
-	@ echo "+ $@"
-	@ mkdir -p $@/brands $@/regular $@/solid
-	@ \
-		for file in $(shell find $< -name "*.svg"); do \
-			echo "+ $@$${file#$<}.html"; \
-			cp $${file} $@$${file#$<}.html; \
-		done
-
-# Images
-IMAGES = $(subst src,material,$(wildcard src/assets/images/*.png))
-material/assets/images: $$@/icons/fontawesome ${IMAGES}
-material/assets/images/%.png: src/assets/images/%.png | $$(@D)/.
-	@ echo "+ $@"
-	@ cp $< $@
-
-# -----------------------------------------------------------------------------
-
-# Search stemmers
-SCRIPT_LUNR = node_modules/lunr-languages/min
-material/assets/javascripts/lunr: ${SCRIPT_LUNR} | $$(@D)/.
-	@ echo "+ $@"
-	@ cp -r $< $@
-	@ cp node_modules/lunr-languages/tinyseg.js $@
-
-# -----------------------------------------------------------------------------
-
-# Scripts
-SCRIPT = src/assets/javascripts/index.ts
-SCRIPT_SOURCES = $(shell find src -name "*.ts*") webpack.config.ts
-material/assets/javascripts: $$@/lunr material/assets/javascripts/bundle.js
-material/assets/javascripts/bundle.js: ${SCRIPT} ${SCRIPT_SOURCES} | $$(@D)/.
-	@ echo "+ $@"
-	@ ${BIN}/webpack --mode ${NODE_ENV}
-
-# -----------------------------------------------------------------------------
-
-# Stylesheets
-STYLESHEETS = $(subst src,material,$(wildcard src/assets/stylesheets/a*.scss))
-STYLESHEETS_SOURCES = $(shell find src -name "_*.scss")
-material/assets/stylesheets: $(patsubst %.scss,%.css,${STYLESHEETS})
-material/%.css: src/%.scss ${STYLESHEETS_SOURCES} | $$(@D)/.
-	@ echo "+ $@"
-	@ ${BIN}/node-sass -q \
-		--source-map $@.map \
-		--source-map-contents false \
-		--include-path node_modules/modularscale-sass/stylesheets \
-		--include-path node_modules/material-design-color \
-		--include-path node_modules/material-shadows \
-		$< $@
-	@ ${BIN}/postcss $@ -m -u autoprefixer -u css-mqpacker -o $@
-	@ ${BIN}/csso $@ -o $(basename $@).min.css \
-		--input-source-map $@.map \
-		--source-map $(basename $@).min.css.map
-
-# -----------------------------------------------------------------------------
-
-# Assets
-material/assets: $$@/fonts $$@/images $$@/javascripts $$@/stylesheets
-
-# -----------------------------------------------------------------------------
-
-# Templates
-HTML = $(subst src,material,$(shell find src -name "*.html" ))
-material/%.html: src/%.html | $$(@D)/.
-	@ echo "+ $@"
-	@ ${BIN}/html-minifier \
-		--collapse-boolean-attributes \
-		--minify-css \
-		--minify-js \
-		--no-include-auto-generated-tags \
-		--remove-comments \
-		--remove-script-type-attributes \
-		--remove-style-link-type-attributes \
-		$< | awk 'NF' | cat .banner - > $@
-
-# Python files
-material/%.py: src/%.py
-	@ echo "+ $@"
-	@ cp $< $@
-
-# Theme configuration
-material/%.yml: src/%.yml
-	@ echo "+ $@"
-	@ cp $< $@
-
-# Theme
-NAME = $(shell jq -r '.name' package.json)
-VERSION = $(shell jq -r '.version' package.json)
-material: $$@/assets $$@/__init__.py $$@/mkdocs_theme.yml ${HTML}
-	@ sed -i.tmp \
-		-e 's/\$$md-name\$$/${NAME}/' \
-		-e 's/\$$md-version\$$/${VERSION}/' \
-		$@/base.html; rm -f $@/base.html.tmp
-	@ echo "\n  ${NAME}-${VERSION}\n"
-
-# -----------------------------------------------------------------------------
-
-# Special targets
-.PHONY: .FORCE build clean lint start
-.FORCE:
-
-# Keep directories
-.PRECIOUS: material%/.

material/assets/javascripts/manifest.json

@@ -1,8 +0,0 @@
-{
-  "bundle.js": "bundle.54b03d7d.min.js",
-  "bundle.js.map": "bundle.54b03d7d.min.js.map",
-  "worker/packer.js": "worker/packer.772b47f4.min.js",
-  "worker/packer.js.map": "worker/packer.772b47f4.min.js.map",
-  "worker/search.js": "worker/search.a9bad5fb.min.js",
-  "worker/search.js.map": "worker/search.a9bad5fb.min.js.map"
-}

material/assets/manifest.json

@@ -0,0 +1,10 @@
+{
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.61d55af4.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.61d55af4.min.js.map",
+  "assets/javascripts/worker/packer.js": "assets/javascripts/worker/packer.f5b5c95d.min.js",
+  "assets/javascripts/worker/packer.js.map": "assets/javascripts/worker/packer.f5b5c95d.min.js.map",
+  "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.1be69dba.min.js",
+  "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.1be69dba.min.js.map",
+  "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.8c25017f.min.css",
+  "assets/stylesheets/app.scss": "assets/stylesheets/app.6f237a30.min.css"
+}

material/base.html

@@ -43,9 +43,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.6f237a30.min.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.8c25017f.min.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -189,7 +189,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.61d55af4.min.js' | url }}"></script>
       <script id="__lang" type="application/json">
         {%- set translations = {} -%}
         {%- for key in [
@@ -208,7 +208,7 @@
         {%- endfor -%}
         {{ translations | tojson }}
       </script>
-      <script>app=initialize({base:"{{ base_url }}",worker:{search:"{{ 'assets/javascripts/worker/search.min.js' | url }}",packer:"{{ 'assets/javascripts/worker/packer.min.js' | url }}"}})</script>
+      <script>app=initialize({base:"{{ base_url }}",worker:{search:"{{ 'assets/javascripts/worker/search.1be69dba.min.js' | url }}",packer:"{{ 'assets/javascripts/worker/packer.f5b5c95d.min.js' | url }}"}})</script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

package.json

@@ -24,10 +24,12 @@
     "url": "https://github.com/squidfunk/mkdocs-material.git"
   },
   "scripts": {
-    "build": "make -j build",
-    "clean": "make clean",
-    "lint": "make lint",
-    "start": "make start"
+    "build": "npx webpack --mode production",
+    "clean": "rm -rf material",
+    "lint": "npm run lint:ts && npm run lint:scss",
+    "lint:ts": "npx tslint -p tsconfig.json 'src/**/*.ts'",
+    "lint:scss": "npx stylelint `find src/assets -name *.scss`",
+    "start": "npx webpack --mode development --watch"
   },
   "dependencies": {
     "clipboard": "^2.0.0",
@@ -42,26 +44,37 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.12.0",
     "@types/clipboard": "^2.0.1",
+    "@types/copy-webpack-plugin": "^5.0.0",
+    "@types/csso": "^3.5.1",
     "@types/escape-html": "0.0.20",
+    "@types/event-hooks-webpack-plugin": "^2.0.0",
+    "@types/html-minifier": "^3.5.3",
     "@types/lunr": "^2.3.2",
     "@types/lz-string": "^1.3.33",
     "@types/node": "^12.12.22",
     "@types/ramda": "^0.26.38",
     "@types/webpack": "^4.41.0",
+    "@types/webpack-assets-manifest": "^3.0.0",
     "autoprefixer": "^9.7.3",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.4.2",
     "css-mqpacker": "^7.0.0",
-    "csso-cli": "^3.0.0",
+    "csso": "^4.0.2",
+    "event-hooks-webpack-plugin": "^2.1.5",
     "expose-loader": "^0.7.5",
+    "extract-loader": "^4.0.3",
+    "file-loader": "^5.0.2",
     "github-types": "^1.0.0",
     "html-minifier": "^4.0.0",
     "material-design-color": "^2.3.2",
     "material-shadows": "^3.0.1",
     "modularscale-sass": "^3.0.10",
-    "node-sass": "^4.13.0",
     "nodemon": "^1.19.4",
     "null-loader": "^3.0.0",
-    "postcss-cli": "^6.1.3",
+    "postcss-loader": "^3.0.0",
     "preact": "^10.1.1",
+    "sass": "^1.25.0",
+    "sass-loader": "^8.0.2",
     "stylelint": "^11.1.1",
     "stylelint-config-standard": "^19.0.0",
     "stylelint-order": "^3.1.1",
@@ -73,6 +86,7 @@
     "tslint-sonarts": "^1.9.0",
     "typescript": "^3.7.4",
     "webpack": "^4.41.4",
+    "webpack-assets-manifest": "^3.1.1",
     "webpack-cli": "^3.3.10"
   },
   "engines": {

src/assets/javascripts/index.ts

@@ -23,6 +23,9 @@
 // TODO: remove this after we finished refactoring
 // tslint:disable
 
+import "../stylesheets/app.scss"
+import "../stylesheets/app-palette.scss"
+
 import * as Clipboard from "clipboard"
 import { identity, values } from "ramda"
 import {

src/assets/javascripts/workers/search/main/index.ts

@@ -46,15 +46,15 @@ function setupLunrLanguages(config: SearchIndexConfig): void {
   const base = "../lunr"
 
   /* Add scripts for languages */
-  const scripts = [`${base}/lunr.stemmer.support.min.js`]
+  const scripts = [`${base}/min/lunr.stemmer.support.min.js`]
   for (const lang of config.lang) {
     if (lang === "ja") scripts.push(`${base}/tinyseg.js`)
-    if (lang !== "en") scripts.push(`${base}/lunr.${lang}.min.js`)
+    if (lang !== "en") scripts.push(`${base}/min/lunr.${lang}.min.js`)
   }
 
   /* Add multi-language support */
   if (scripts.length > 1)
-    scripts.push(`${base}/lunr.multi.min.js`)
+    scripts.push(`${base}/min/lunr.multi.min.js`)
 
   /* Load scripts synchronously */
   importScripts(...scripts)

src/assets/stylesheets/extensions/_admonition.scss

@@ -134,7 +134,7 @@
       @if length($names) > 1 {
         @for $n from 2 through length($names) {
           &.#{nth($names, $n)} {
-            @extend .admonition%#{nth($names, 1)};
+            @extend %#{nth($names, 1)};
           }
         }
       }

src/assets/stylesheets/utilities/_break.scss

@@ -80,7 +80,7 @@ $break-devices: () !default;
           @error "Invalid number: #{$number}";
         }
       }
-    } @elseif type-of($value) == number {
+    } @else if type-of($value) == number {
       $min: min($value, $min);
       $max: null;
     } @else {
@@ -129,7 +129,7 @@ $break-devices: () !default;
     @media only screen and (min-width: $breakpoint) {
       @content;
     }
-  } @elseif type-of($breakpoint) == list {
+  } @else if type-of($breakpoint) == list {
     $min: nth($breakpoint, 1);
     $max: nth($breakpoint, 2);
     @if type-of($min) == number and type-of($max) == number {

src/base.html

@@ -97,7 +97,7 @@
       <link
         rel="stylesheet"
         type="text/css"
-        href="{{ 'assets/stylesheets/app.min.css' | url }}"
+        href="{{ 'assets/stylesheets/app.scss' | url }}"
       />
 
       <!-- Extra color palette -->
@@ -105,7 +105,7 @@
         <link
           rel="stylesheet"
           type="text/css"
-          href="{{ 'assets/stylesheets/app-palette.min.css' | url }}"
+          href="{{ 'assets/stylesheets/app-palette.scss' | url }}"
         />
       {% endif %}
 

webpack.config.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2017-2019 Martin Donath <martin.donath@squidfunk.com>
+ * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to
@@ -20,9 +20,16 @@
  * IN THE SOFTWARE.
  */
 
+import * as CopyPlugin from "copy-webpack-plugin"
+import { minify as mincss } from "csso"
+import * as EventHooksPlugin from "event-hooks-webpack-plugin"
+import * as fs from "fs"
+import { minify as minhtml } from "html-minifier"
 import * as path from "path"
+import { toPairs } from "ramda"
 import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin"
 import { Configuration } from "webpack"
+import * as AssetsManifestPlugin from "webpack-assets-manifest"
 
 /* ----------------------------------------------------------------------------
  * Helper functions
@@ -36,6 +43,7 @@ import { Configuration } from "webpack"
  * @return Webpack configuration
  */
 function config(args: Configuration): Configuration {
+  const assets = {}
   return {
     mode: args.mode,
 
@@ -50,6 +58,7 @@ function config(args: Configuration): Configuration {
             {
               loader: "ts-loader",
               options: {
+                experimentalWatchApi: true,
                 transpileOnly: true,
                 compilerOptions: {
                   module: "esnext",
@@ -61,6 +70,55 @@ function config(args: Configuration): Configuration {
           exclude: /\/node_modules\//
         },
 
+        /* SASS stylesheets */
+        {
+          test: /\.scss$/,
+          use: [
+            {
+              loader: "file-loader",
+              options: {
+                name: `[name]${
+                  args.mode === "production" ? ".[md5:hash:hex:8].min" : ""
+                }.css`,
+                outputPath: "assets/stylesheets",
+                publicPath: path.resolve(__dirname, "material")
+              }
+            },
+            "extract-loader",
+            {
+              loader: "css-loader",
+              options: {
+                sourceMap: args.mode !== "production"
+              }
+            },
+            {
+              loader: "postcss-loader",
+              options: {
+                ident: "postcss",
+                plugins: () => [
+                  require("autoprefixer")(),
+                  require("css-mqpacker")
+                ],
+                sourceMap: args.mode !== "production"
+              }
+            },
+            {
+              loader: "sass-loader",
+              options: {
+                implementation: require("sass"),
+                sassOptions: {
+                  includePaths: [
+                    "node_modules/modularscale-sass/stylesheets",
+                    "node_modules/material-design-color",
+                    "node_modules/material-shadows"
+                  ]
+                },
+                sourceMap: args.mode !== "production"
+              }
+            }
+          ]
+        },
+
         /* Preact is only used for its great JSX typings */
         {
           test: /\bpreact\b/,
@@ -81,11 +139,20 @@ function config(args: Configuration): Configuration {
       ]
     },
 
+    /* Plugins */
+    plugins: [
+      new AssetsManifestPlugin({
+        output: "assets/manifest.json",
+        assets
+      })
+    ],
+
     /* Source maps */
     devtool: "source-map",
 
-    /* Filter false positives */
+    /* Filter false positives and copied files */
     stats: {
+      excludeAssets: [/assets/, /\.(html|py|yml)$/],
       warningsFilter: [
         /export '.*' was not found in/
       ]
@@ -105,38 +172,135 @@ function config(args: Configuration): Configuration {
  *
  * @return Webpack configurations
  */
-export default (_env: never, args: Configuration): Configuration[] => ([
+export default (_env: never, args: Configuration): Configuration[] => {
+  const hash = args.mode === "production" ? ".[chunkhash].min" : ""
+  const base = config(args)
+  return [
 
-  /* Application */
-  {
-    ...config(args),
-    entry: "src/assets/javascripts",
-    output: {
-      path: path.resolve(__dirname, "material/assets/javascripts"),
-      filename: "bundle.js",
-      libraryTarget: "window"
-    }
-  },
+    /* Application */
+    {
+      ...base,
+      entry: {
+        "assets/javascripts/bundle": "src/assets/javascripts"
+      },
+      output: {
+        path: path.resolve(__dirname, "material"),
+        filename: `[name]${hash}.js`,
+        hashDigestLength: 8,
+        libraryTarget: "window"
+      },
+      plugins: [
+        ...base.plugins,
 
-  /* Search worker */
-  {
-    ...config(args),
-    entry: "src/assets/javascripts/workers/search/main",
-    output: {
-      path: path.resolve(__dirname, "material/assets/javascripts"),
-      filename: "worker/search.js",
-      libraryTarget: "var"
-    }
-  },
+        /* Copy FontAwesome icons to dot directory, so MkDocs doesn't bundle */
+        new CopyPlugin([
+          {
+            toType: "template",
+            to: "assets/images/icons/fontawesome/[path]/[name].[ext].html",
+            from: "**/*.svg"
+          }
+        ], {
+          context: "node_modules/@fortawesome/fontawesome-free/svgs"
+        }),
 
-  /* Packer worker */
-  {
-    ...config(args),
-    entry: "src/assets/javascripts/workers/packer/main",
-    output: {
-      path: path.resolve(__dirname, "material/assets/javascripts"),
-      filename: "worker/packer.js",
-      libraryTarget: "var"
+        /* Copy search stemmers and segmenters */
+        new CopyPlugin([
+          { to: "assets/javascripts/lunr", from: "min/*.js" },
+          { to: "assets/javascripts/lunr", from: "tinyseg.js" }
+        ], {
+          context: "node_modules/lunr-languages"
+        }),
+
+        /* Copy assets like fonts and images */
+        new CopyPlugin([
+          { from: "assets/fonts/**/*.!(css)" },
+          { from: "assets/images/*.{ico,png,svg}" },
+          { from: "**/*.{py,yml}" },
+
+          /* Copy and minify font stylesheets */
+          {
+            from: "assets/fonts/*.css",
+            transform: content => {
+              const { css } = mincss(content.toString())
+              return css
+            }
+          },
+
+          /* Copy and minify HTML */
+          {
+            from: "**/*.html",
+            transform: content => {
+              const metadata = require("./package.json")
+              const banner =
+                "{#-\n" +
+                "  This file was automatically generated - do not edit\n" +
+                "-#}\n"
+              return banner + minhtml(content.toString(), {
+                collapseBooleanAttributes: true,
+                includeAutoGeneratedTags: false,
+                minifyCSS: true,
+                minifyJS: true,
+                removeComments: true,
+                removeScriptTypeAttributes: true,
+                removeStyleLinkTypeAttributes: true
+              })
+
+                /* Remove empty lines without collapsing everything */
+                .replace(/^\s*[\r\n]/gm, "")
+
+                /* Write theme version into template */
+                .replace("$md-name$", metadata.name)
+                .replace("$md-version$", metadata.version)
+            }
+          }
+        ], {
+          context: "src"
+        }),
+
+        /* Replace assets in base template */
+        new EventHooksPlugin({
+          afterEmit: () => {
+            const manifest = require("./material/assets/manifest.json")
+            const template = toPairs<string>(manifest)
+              .reduce((content, [from, to]) => {
+                return content.replace(from, to)
+              }, fs.readFileSync("material/base.html", "utf8"))
+
+            /* Save template with replaced assets */
+            fs.writeFileSync("material/base.html", template, "utf8")
+          }
+        })
+      ]
+    },
+
+    /* Search worker */
+    {
+      ...base,
+      entry: {
+        "assets/javascripts/worker/search":
+          "src/assets/javascripts/workers/search/main"
+      },
+      output: {
+        path: path.resolve(__dirname, "material"),
+        filename: `[name]${hash}.js`,
+        hashDigestLength: 8,
+        libraryTarget: "var"
+      }
+    },
+
+    /* Packer worker */
+    {
+      ...base,
+      entry: {
+        "assets/javascripts/worker/packer":
+          "src/assets/javascripts/workers/packer/main"
+      },
+      output: {
+        path: path.resolve(__dirname, "material"),
+        filename: `[name]${hash}.js`,
+        hashDigestLength: 8,
+        libraryTarget: "var"
+      }
     }
-  }
-])
+  ]
+}