Merge pull request #1274 from bjones1/webpack_fix

Webpack fix

Author: bnmnetp

.github/workflows/python-package.yml

@@ -5,9 +5,9 @@ name: Python package
 
 on:
     push:
-        branches: [master, bookserver]
+        branches: [master, peer_support]
     pull_request:
-        branches: [master, bookserver]
+        branches: [master, peer_support]
 
 jobs:
     build:

package.json

@@ -18,15 +18,13 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
-        "copy-webpack-plugin": "^8.0.0",
-        "compression-webpack-plugin": "^6.0.0",
-        "css-loader": "^5.0.0",
+        "copy-webpack-plugin": "^9.0.0",
+        "compression-webpack-plugin": "^9.0.0",
+        "css-loader": "^6.0.0",
         "css-minimizer-webpack-plugin": "^3.0.0",
-        "eslint": "^7.0.0",
-        "html-loader": "^2.0.0",
+        "html-loader": "^3.0.0",
         "html-webpack-plugin": "^5.0.0",
-        "mini-css-extract-plugin": "^1.0.0",
-        "style-loader": "^2.0.0",
+        "mini-css-extract-plugin": "^2.0.0",
         "webpack": "^5.61.0",
         "webpack-bundle-analyzer": "^4.0.0",
         "webpack-cli": "^4.0.0"

runestone/__main__.py

@@ -150,8 +150,8 @@ def build(all, wd):
     else:
         os.chdir(findProjectRoot())
     sys.path.insert(0, os.getcwd())
-    if not pathlib.Path(resource_filename("runestone", "dist/runestone.bundle.js")).exists():
-        click.echo("Error -- You are missing runestone.bundle.js.  Please make sure")
+    if not pathlib.Path(resource_filename("runestone", "dist/webpack_static_imports.json")).exists():
+        click.echo("Error -- you are missing webpack_static_imports.json.  Please make sure")
         click.echo("you have Runestone installed correctly.")
         click.echo("In a development environment, execute npm run build.")
         sys.exit(-1)

webpack.config.js

@@ -8,9 +8,9 @@
 
 const path = require("path");
 
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 const CompressionPlugin = require("compression-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -37,7 +37,7 @@ module.exports = (env, argv) => {
                 },
                 {
                     test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
-                    // For more information, see https://webpack.js.org/guides/asset-modules/.
+                    // For more information, see `Asset Modules <https://webpack.js.org/guides/asset-modules/>`_.
                     type: "asset",
                 },
             ],
@@ -56,24 +56,24 @@ module.exports = (env, argv) => {
         },
         output: {
             path: path.resolve(__dirname, "runestone/dist"),
-            // See https://webpack.js.org/guides/caching/. This provides a hash for dynamic imports as well, avoiding caching out-of-date JS.
-            filename: "[name].bundle.js?v=[contenthash]",
-            // Node 17.0 reports ``Error: error:0308010C:digital envelope routines::unsupported``. Per `SO <https://stackoverflow.com/a/69394785/16038919>`_, this error is produced by using an old, default hash that OpenSSL removed support for. The `webpack docs <https://webpack.js.org/configuration/output/#outputhashfunction>"__ says that ``xxhash64`` is a faster algorithm.
+            // _`Output file naming`: see the `caching guide <https://webpack.js.org/guides/caching/>`_. This provides a hash for dynamic imports as well, avoiding caching out-of-date JS. Putting the hash in a query parameter (such as ``[name].js?v=[contenthash]``) causes the compression plugin to not update zipped files.
+            filename: "[name].[contenthash].bundle.js",
+            // Node 17.0 reports ``Error: error:0308010C:digital envelope routines::unsupported``. Per `SO <https://stackoverflow.com/a/69394785/16038919>`_, this error is produced by using an old, default hash that OpenSSL removed support for. The `webpack docs <https://webpack.js.org/configuration/output/#outputhashfunction>`__ say that ``xxhash64`` is a faster algorithm.
             hashFunction: "xxhash64",
             // Delete everything in the output directory on each build.
             clean: true,
         },
-        // See https://webpack.js.org/guides/code-splitting/#splitchunksplugin.
+        // See the `SplitChunksPlugin docs <https://webpack.js.org/guides/code-splitting/#splitchunksplugin>`_.
         optimization: {
             moduleIds: "deterministic",
             // Collect all the webpack import runtime into a single file, which is named ``runtime.bundle.js``. This must be statically imported by all pages containing Runestone components.
             runtimeChunk: "single",
             splitChunks: {
                 chunks: "all",
             },
-            // CSS for production was copied from https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production.
+            // CSS for production was copied from `Minimizing For Production <https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production>`_.
             minimizer: [
-                // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line.
+                // For webpack@5 you can use the ``...`` syntax to extend existing minimizers (i.e. ``terser-webpack-plugin``), uncomment the next line.
                 `...`,
                 new CssMinimizerPlugin(),
             ],
@@ -101,7 +101,8 @@ module.exports = (env, argv) => {
                 ],
             }),
             new MiniCssExtractPlugin({
-                filename: "[name].css?v=[contenthash]",
+                // See `output file naming`_.
+                filename: "[name].[contenthash].css",
                 chunkFilename: "[id].css",
             }),
             // Copied from the `webpack docs <https://webpack.js.org/plugins/compression-webpack-plugin>`_. This creates ``.gz`` versions of all files. The webserver in use needs to be configured to send this instead of the uncompressed versions.