Use webpack 5

- Generate to editor/dist

Dockerfile

@@ -5,5 +5,5 @@ EXPOSE 80
 WORKDIR /app
 ADD ./wiki /app
 ADD ./templates /app/templates
-ADD ./dist /app/dist
+ADD ./editor/dist /app/dist
 ENTRYPOINT ["/app/wiki"]

editor/package.json

@@ -1,4 +1,9 @@
 {
+  "name": "editor",
+  "main": "src/index.js",
+  "sideEffects": [
+    "**"
+  ],
   "dependencies": {
     "@egjs/hammerjs": "^2.0.17",
     "axios": "^0.19.2",
@@ -29,6 +34,7 @@
     "sass-loader": "^7.3.1",
     "style-loader": "^1.3.0",
     "timsort": "^0.3.0",
+    "util": "^0.12.4",
     "uuid": "^8.3.2",
     "vis-data": "^6.6.1",
     "vis-network": "^7.10.2",
@@ -36,22 +42,26 @@
     "wiki-list-editor": "file:../list-editor"
   },
   "devDependencies": {
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
     "esm": "^3.2.25",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "html-webpack-plugin": "^5.0.0",
+    "mini-css-extract-plugin": "^2.2.0",
     "mocha": "^7.2.0",
     "mocha-webpack": "^1.1.0",
+    "process": "^0.11.10",
+    "progress-bar-webpack-plugin": "^2.1.0",
     "scss-loader": "0.0.1",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.50.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-validator": "^3.0.1"
   },
   "scripts": {
     "test": "node_modules/.bin/mocha -r esm",
-    "watch": "webpack --watch --hide-modules",
+    "watch": "webpack --watch",
     "start": "webpack-dev-server --open --hot",
-    "build": "webpack --progress --hide-modules --mode=production",
-    "docker": "webpack --color=false --hide-modules --mode=production"
+    "build": "webpack --progress --mode=production",
+    "docker": "webpack --no-color --mode=production"
   }
 }

editor/src/styles.scss

@@ -13,7 +13,7 @@
 @import url('https://rsms.me/inter/inter.css');
 
 html {
-  font-family: 'Inter', sans-serif;
+font-family: 'Inter', sans-serif;
 }
 
 body {

editor/src/wikilinks.js

@@ -1,11 +1,10 @@
 'use strict'
 
-const Plugin = require('markdown-it-regexp')
-const extend = require('extend')
-const sanitize = require('sanitize-filename')
-
-module.exports = (options) => {
+import Plugin from "markdown-it-regexp";
+import extend from "extend";
+import sanitize from "sanitize-filename";
 
+export default (options) => {
     const defaults = {
         baseURL: '/',
         relativeBaseURL: './',

editor/webpack.config.js

@@ -2,62 +2,78 @@ const path = require('path');
 
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const webpack = require('webpack');
 
-module.exports = {
-    mode: 'development',
-    entry: {
-        index: './src/index.js'
-    },
-    output: {
-        filename: '[name].bundle.js',
-        path: path.resolve(__dirname, '../dist')
-    },
+module.exports = env => {
+    return {
+        // mode: 'production',
+        // devtool: 'source-map',
+        // entry: {
+        //     index: './src/index.js'
+        // },
+        // output: {
+        //     filename: '[name].bundle.js',
+        //     path: path.resolve(__dirname, '../dist')
+        // },
 
-    module: {
-        rules: [
-            {
-                test: /\.s?css$/,
-                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
-            },
-            {
-                test: /\.(woff|woff2|eot|ttf|otf)$/,
-                loader: "file-loader",
-                options: {
-                    name: '[name].[ext]',
-                    outputPath: 'font/'
+        module: {
+            rules: [
+                {
+                    test: /\.s?css$/,
+                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+                },
+                {
+                    test: /\.(woff|woff2|eot|ttf|otf)$/,
+                    type: 'asset/resource'
                 }
-            }
-        ]
-    },
+            ]
+        },
 
-    plugins: [
-        new CleanWebpackPlugin(),
-        new MiniCssExtractPlugin({
-            filename: '[name].css'
-        }),
-    ],
+        stats: {
+            orphanModules: true
+        },
 
-    devServer: {
-        contentBase: './dist',
-        hot: true
-    },
+        resolve: {
+            fallback: {
+                util: require.resolve("util/")
+            }
+        },
 
-    optimization: {
-        splitChunks: {
-            cacheGroups: {
-                commons: {
-                    test: /[\\/]node_modules[\\/]/,
-                    name: 'vendors',
-                    chunks: 'all'
-                },
-                styles: {
-                    name: 'styles',
-                    test: /\.css$/,
-                    chunks: 'all',
-                    enforce: true,
-                },
+        plugins: [
+            // new ProgressBarPlugin(),
+            // new CleanWebpackPlugin(),
+            new MiniCssExtractPlugin({
+                filename: '[name].css'
+            }),
+            new webpack.EnvironmentPlugin({
+                DEBUG: false,
+                NODE_DEBUG: false,
+            })
+        ],
+        //
+        // devServer: {
+        //     contentBase: './dist',
+        //     hot: true
+        // },
+        //
+        optimization: {
+            usedExports: true,
+            splitChunks: {
+                cacheGroups: {
+                    commons: {
+                        test: /[\\/]node_modules[\\/]/,
+                        name: 'vendors',
+                        chunks: 'all'
+                    },
+                    styles: {
+                        name: 'styles',
+                        test: /\.css$/,
+                        chunks: 'all',
+                        enforce: true,
+                    },
+                }
             }
         }
     }
-
 };

list-editor/package.json

@@ -4,6 +4,7 @@
   "description": "Simple editor of lists",
   "author": "Peter Stuifzand <peter@p83.nl>",
   "main": "index.js",
+  "sideEffects": ["**"],
   "scripts": {
     "test": "jasmine --require=esm"
   },

main.go

@@ -1225,7 +1225,7 @@ func main() {
 	})
 
 	http.Handle("/search/", sh)
-	http.Handle("/public/", http.StripPrefix("/public/", http.FileServer(http.Dir("./dist"))))
+	http.Handle("/public/", http.StripPrefix("/public/", http.FileServer(http.Dir("./editor/dist"))))
 	http.Handle("/save/", &saveHandler{})
 	http.Handle("/edit/", &editHandler{})
 	http.Handle("/history/", &historyHandler{})

templates/layout.html

@@ -6,8 +6,8 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="redirect_uri" href="{{ .RedirectURI }}" />
-    <link rel="stylesheet" href="/public/vendors.css" />
-    <link rel="stylesheet" href="/public/index.css" />
+    <link rel="stylesheet" href="/public/main.css" />
+    <link rel="stylesheet" href="/public/styles.css" />
 <!--     <link rel="stylesheet" href="https://unpkg.com/prismjs@1.20.0/themes/prism-tomorrow.css"> -->
 <!--     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> -->
     <title>{{ .Title }} - Wiki</title>
@@ -87,7 +87,7 @@
         <li><a href="/edit/[[page]]">Create a page</a></li>
     </ul>
 </div>
-<script async src="/public/vendors.bundle.js"></script>
-<script async src="/public/index.bundle.js"></script>
+<script async src="/public/vendors.js"></script>
+<script async src="/public/main.js"></script>
 </body>
 </html>