refactor: updated devDependencies regarding webpack / to webpack version 5 & some cleanup

packages/uikit-workshop/build/webpack-server.js

@@ -120,10 +120,8 @@ async function serve(patternlab, configPath, buildDir = 'public') {
 
       app.use(
         webpackDevMiddleware(compiler, {
-          quiet: true,
           stats: 'errors-warnings',
           writeToDisk: true,
-          logLevel: 'error',
         })
       );
 

packages/uikit-workshop/package.json

@@ -7,8 +7,8 @@
     "start": "node ./build-tools.js",
     "prepublish": "npm run build",
     "postbootstrap": "npm run build",
-    "build": "webpack-cli --config webpack.config.js --progress --bail --display=minimal",
-    "watch": "webpack-cli --config webpack.config.js --progress --watch --display=minimal",
+    "build": "webpack-cli --config webpack.config.js --progress --bail --stats=minimal",
+    "watch": "webpack-cli --config webpack.config.js --progress --watch --stats=minimal",
     "test": "npm run build"
   },
   "authors": [
@@ -48,32 +48,32 @@
     "@pattern-lab/uikit-polyfills": "^5.16.1",
     "@reach/visually-hidden": "^0.1.2",
     "@webcomponents/custom-elements": "^1.4.3",
-    "autoprefixer": "^9.6.5",
-    "babel-loader": "^8.0.6",
+    "autoprefixer": "^10.2.5",
+    "babel-loader": "^9.1.2",
     "better-opn": "^3.0.0",
     "browser-sync": "^2.26.7",
     "classnames": "^2.3.1",
-    "clean-css-loader": "^1.0.1",
-    "clean-webpack-plugin": "0.1.19",
+    "clean-css-loader": "^4.2.1",
+    "clean-webpack-plugin": "4.0.0",
     "clipboard": "^2.0.8",
-    "copy-webpack-plugin": "^5.0.2",
+    "copy-webpack-plugin": "^11.0.0",
     "cosmiconfig": "^7.0.0",
-    "css-loader": "^3.2.0",
+    "css-loader": "^6.7.3",
     "ejs": "^3.1.6",
     "express": "^4.17.1",
     "fg-loadjs": "^1.1.0",
     "fuse.js": "^6.4.6",
     "handlebars": "^4.7.7",
-    "hard-source-webpack-plugin-patch": "^0.13.3",
     "hasha": "^5.2.2",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^4.0.0-beta.11",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.2",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^2.7.2",
     "mousetrap": "^1.6.5",
     "portfinder": "^1.0.28",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.2.8",
+    "postcss-loader": "^7.0.2",
     "preact-render-to-string": "^5.1.1",
     "preact": "^10.0.5",
     "preload-webpack-plugin": "^3.0.0-beta.3",
@@ -86,21 +86,21 @@
     "redux": "4.1.2",
     "redux-thunk": "^2.4.0",
     "sass": "1.43.4",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^13.2.0",
     "scriptjs": "^2.5.9",
     "scroll-js": "3.4.x",
     "skatejs": "^5.2.4",
-    "style-loader": "^1.0.0",
-    "svg-sprite-loader": "^4.1.6",
-    "svg-transform-loader": "^2.0.8",
-    "svgo-loader": "^3.0.0",
-    "ts-loader": "^6.2.1",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-middleware": "^3.7.2",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^4.2.2",
-    "webpackbar": "^4.0.0",
+    "style-loader": "^3.3.1",
+    "svg-sprite-loader": "^6.0.11",
+    "svg-transform-loader": "^2.0.13",
+    "svgo-loader": "^4.0.0",
+    "ts-loader": "^9.4.2",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-middleware": "^6.0.1",
+    "webpack-hot-middleware": "^2.25.3",
+    "webpack-merge": "^5.8.0",
+    "webpackbar": "5.0.2",
     "wolfy87-eventemitter": "^5.2.9",
     "yargs": "^17.0.1"
   },

packages/uikit-workshop/src/html/index.html

@@ -8,13 +8,16 @@
       content="initial-scale=1, width=device-width, viewport-fit=cover"
     />
     <meta name="theme-color" content="#ababab" />
+    <!-- webpackIgnore: true -->
     <link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
 
+    <!-- webpackIgnore: true -->
     <link
       rel="prefetch"
       as="image"
       href="styleguide/images/pattern-lab-logo--on-dark.svg"
     />
+    <!-- webpackIgnore: true -->
     <link
       rel="prefetch"
       as="image"
@@ -28,11 +31,14 @@
     <!-- the template for the modal slider -->
     <!-- prettier-ignore -->
     <script type="text/x-handlebars-template" class="pl-js-panel-template-base">
-      ${require('./partials/base-template.html') }
+      <include src="partials/base-template.html"/>
     </script>
 
+    <!-- webpackIgnore: true -->
     <script src="styleguide/data/patternlab-data.js" defer></script>
+    <!-- webpackIgnore: true -->
     <script src="annotations/annotations.js" defer></script>
+    <!-- webpackIgnore: true -->
     <script
       src="styleguide/js/patternlab-viewer.modern.js"
       type="module"
@@ -63,6 +69,7 @@
         }
       })();
     </script>
+    <!-- webpackIgnore: true -->
     <script
       src="styleguide/js/patternlab-viewer.js"
       defer

packages/uikit-workshop/webpack.config.js

@@ -1,16 +1,14 @@
 // webpack.config.js
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin-patch');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const autoprefixer = require('autoprefixer');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const argv = require('yargs').argv;
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const WebpackBar = require('webpackbar');
+const fs = require('node:fs');
 
 const cosmiconfigSync = require('cosmiconfig').cosmiconfigSync;
 const explorerSync = cosmiconfigSync('patternlab');
@@ -23,10 +21,27 @@ const defaultConfig = {
   sourceMaps: true,
   watch: argv.watch ? true : false,
   publicPath: './styleguide/',
-  copy: [{ from: './src/images/**', to: 'images', flatten: true }],
+  copy: {
+    patterns: [
+      { from: '../uikit-workshop/src/images/**', to: 'images/[name][ext]' },
+    ],
+  },
   noViewAll: false,
 };
 
+// Requiring partials
+// adapted from https://github.com/webpack-contrib/html-loader/issues/291#issuecomment-721909576
+const INCLUDE_PATTERN = /\<include src=\"(.+)\"\/?\>(?:\<\/include\>)?/gi;
+const processNestedHtml = (content, loaderContext) =>
+  !INCLUDE_PATTERN.test(content)
+    ? content
+    : content.replace(INCLUDE_PATTERN, (m, src) =>
+        processNestedHtml(
+          fs.readFileSync(path.resolve(loaderContext.context, src), 'utf8'),
+          loaderContext
+        )
+      );
+
 module.exports = function (apiConfig) {
   return new Promise(async (resolve) => {
     let customConfig = defaultConfig;
@@ -109,7 +124,9 @@ module.exports = function (apiConfig) {
         loader: 'postcss-loader',
         options: {
           sourceMap: config.sourceMaps,
-          plugins: () => [autoprefixer()],
+          postcssOptions: {
+            plugins: [['autoprefixer', {}]],
+          },
         },
       },
       {
@@ -147,7 +164,6 @@ module.exports = function (apiConfig) {
       output: {
         path: path.resolve(config.rootDir, `${config.buildDir}/styleguide`),
         publicPath: `${config.publicPath}`,
-        filename: '[name].js',
         chunkFilename: `js/[name]-chunk-[chunkhash].js`,
       },
       module: {
@@ -170,12 +186,11 @@ module.exports = function (apiConfig) {
               {
                 loader: 'html-loader',
                 options: {
-                  interpolate: true,
-                  minimize: config.prod ? true : false,
-                  minifyCSS: false,
-                  minifyJS: config.prod ? true : false,
-                  // super important -- this prevents the embedded iframe srcdoc HTML from breaking!
-                  preventAttributesEscaping: true,
+                  minimize: {
+                    minifyCSS: false,
+                    minifyJS: config.prod ? true : false,
+                  },
+                  preprocessor: processNestedHtml,
                 },
               },
             ],
@@ -225,8 +240,8 @@ module.exports = function (apiConfig) {
       mode: config.prod ? 'production' : 'development',
       optimization: {
         minimize: config.prod,
-        occurrenceOrder: true,
-        namedChunks: true,
+        chunkIds: 'total-size',
+        moduleIds: 'size',
         removeAvailableModules: true,
         removeEmptyChunks: true,
         nodeEnv: 'production',
@@ -235,9 +250,9 @@ module.exports = function (apiConfig) {
         splitChunks: {
           chunks: 'async',
           cacheGroups: {
-            vendors: {
+            defaultVendors: {
               test: /[\\/]node_modules[\\/]/,
-              name: 'vendors',
+              idHint: 'vendors',
               chunks: 'async',
               reuseExistingChunk: true,
             },
@@ -247,7 +262,6 @@ module.exports = function (apiConfig) {
           ? [
               new TerserPlugin({
                 test: /\.m?js(\?.*)?$/i,
-                sourceMap: config.prod ? false : config.sourceMaps,
                 terserOptions: {
                   safari10: true,
                 },
@@ -258,23 +272,6 @@ module.exports = function (apiConfig) {
       plugins: [new WebpackBar(), new CopyPlugin(config.copy)],
     };
 
-    webpackConfig.plugins.push(
-      new HardSourceWebpackPlugin({
-        info: {
-          level: 'warn',
-        },
-        // Clean up large, old caches automatically.
-        cachePrune: {
-          // Caches younger than `maxAge` are not considered for deletion. They must
-          // be at least this (default: 2 days) old in milliseconds.
-          maxAge: 2 * 24 * 60 * 60 * 1000,
-          // All caches together must be larger than `sizeThreshold` before any
-          // caches will be deleted. Together they must be at least 300MB in size
-          sizeThreshold: 300 * 1024 * 1024,
-        },
-      })
-    );
-
     const legacyConfig = merge(webpackConfig, {
       entry: {
         'js/patternlab-pattern': path.join(
@@ -303,7 +300,6 @@ module.exports = function (apiConfig) {
         new MiniCssExtractPlugin({
           filename: `[name].css`,
           chunkFilename: `[id].css`,
-          allChunks: true,
         }),
       ],
     });
@@ -343,22 +339,19 @@ module.exports = function (apiConfig) {
       },
       plugins: [
         // clear out the buildDir on every fresh Webpack build
-        new CleanWebpackPlugin(
-          config.watch
+        new CleanWebpackPlugin({
+          verbose: false,
+          cleanOnceBeforeBuildPatterns: config.watch
             ? []
             : [
                 `${config.buildDir}/index.html`,
                 `${config.buildDir}/styleguide/css`,
                 `${config.buildDir}/styleguide/js`,
               ],
-          {
-            allowExternal: true,
-            verbose: false,
 
-            // perform clean just before files are emitted to the output dir
-            beforeEmit: false,
-          }
-        ),
+          // perform clean just before files are emitted to the output dir
+          beforeEmit: false,
+        }),
         new HtmlWebpackPlugin({
           filename: '../index.html',
           template: path.resolve(__dirname, 'src/html/index.html'),
@@ -367,7 +360,6 @@ module.exports = function (apiConfig) {
         new MiniCssExtractPlugin({
           filename: `[name].css`,
           chunkFilename: `[id].css`,
-          allChunks: true,
         }),
       ],
     });