refactor: updated devDependencies regarding webpack / to webpack vers…

…ion 5 & some cleanup (pattern-lab#1301) * chore(docs): some typos missed to replace mustache initially and incorrect handlebars two times (both in package name and URL) * Revert "Merge pull request pattern-lab#2 from pattern-lab/dev" This reverts commit 7812878, reversing changes made to 26db979. * Revert "Merge pull request pattern-lab#1 from pattern-lab/dev" This reverts commit 26db979, reversing changes made to fc90750. * Revert "chore(docs): some typos" This reverts commit 271dc8d. * refactor: removed obsolete dependencies Webpack 5 supportes module caching out of the box, compare to e.g. mzgoddard/hard-source-webpack-plugin#514 (comment) * refactor: removed code out of obsolete dependency * refactor: updated clean-css-loader related dependencies * refactor: updated clean-webpack-plugin dependency and restructured the code according to johnagan/clean-webpack-plugin#106 * refactor: updated webpack-merge dependency * refactor: removed obsolete dependencies this seems to have been removed (intentionally?) by pattern-lab@2cb663d#diff-8c9b7dba764c6bd34aaec36a6a42e7b69d9a46b19712a47706355bb8616d3319L365 * refactor: updated html-webpack-plugin dependency * refactor: updated node-sass-magic-importer dependency * refactor: updated style-loader dependency * refactor: updated svg-sprite-loader dependency * refactor: updated svg-transform-loader dependency * refactor: updated svgo-loader dependency * refactor: updated ts-loader dependency * refactor: updated webpack-cli dependency * refactor: updated copy-webpack-plugin dependency * refactor: updated webpack-dev-middleware dependency "the logger, logLevel and logTime options were removed without replacement." source: https://github.com/webpack/webpack-dev-middleware/releases?after=v4.0.0-rc.1 * refactor: updated mini-css-extract-plugin dependency * refactor(webpackdevmiddleware): quiet has been removed a lot earlier even already * refactor: updated no-emit-webpack-plugin dependency * refactor: updated webpack dependency * refactor: rebuild yarn.lock file * refactor(terserplugin): options had an unknown property 'sourceMap' * refactor(webpack): clean up configuration https://webpack.js.org/migrate/5/#clean-up-configuration * Revert "Merge branch 'dev' into refactor-updated-depencencies-webpack" This reverts commit 8f347df, reversing changes made to e619e63. * refactor(webpack): updated outdated options optimization.namedChunks: true → optimization.chunkIds: 'named' source: https://webpack.js.org/migrate/5/#update-outdated-options * refactor(webpack): updated outdated options optimization.occurrenceOrder: true → optimization: { chunkIds: 'total-size', moduleIds: 'size' } source: https://webpack.js.org/migrate/5/#update-outdated-options * refactor: regenerated yarn.lock * refactor: updated babel-loader dependency * refactor: updated svg-sprite-loader dependency * refactor: updated css-loader dependency * refactor: updated postcss-loader dependency * refactor(postcss-loader): added postcss dependency * refactor: updated autoprefixer dependency * refactor: updated copy-webpack-plugin dependency * refactor: updated webpack dependency * refactor: updated webpackbar dependency * refactor: regenerated yarn.lock file * refactor: regenerated yarn.lock file * refactor(prettier): code rework on the prettier feedback * refactor(prettier): code rework on the prettier feedback * build: regenerated yarn.lock file * refactor: updated webpack-cli dependency * refactor: updated webpack dependency * chore: removed unnecessary require entries * build(webpack): 'stats' is the new 'display' * build: regenerated package-lock.json file * Revert "refactor: updated no-emit-webpack-plugin dependency" * build: regenerated yarn.lock file * chore: reverted node-sass-selector-importer update * refactor: updated sass-loader dependency * chore: code optimizations that are mentioned by the github pipeline as well * chore: rebuild yarn.lock file * build: regenerated yarn.lock * build: regenerated yarn.lock file * refactor: updated clean-webpack-plugin * refactor: updated copy-webpack-plugin * refactor: updated html-webpack-plugin * refactor: updated webpack * refactor: updated webpack-cli * refactor: updated webpack-dev-middleware * refactor: updated webpack-hot-middleware * refactor: updated webpack-merge * refactor: updated webpackbar * refactor: updated mini-css-extract-plugin * refactor: updated babel-loader * refactor: updating clean-css-loader * refactor: updated css-loader * refactor: updated postcss-loader * refactor: updated sass-loader * refactor: updated style-loader * refactor: updated svg-sprite-loader * refactor: updated svgo-loader * refactor: updates ts-loader * chore: updated html-loader * refactor: minimize on productive build is the new default https://github.com/webpack-contrib/html-loader/blob/master/CHANGELOG.md#100-2020-03-19 * refactor(webpack): we need to ignore those references as those are generated independently and won't need to get followed by Webpack * refactor(html-loader): interpolate option got removed that for we need to adapt some other solution for the new preprocessor option * fix(copy-webpack-plugin): correcting the path to prevent webpack errors * refactor: two of the options are now subitems of minimize * chore: this attribute doesn't exist (any more) * Restore packages/core/test/files/_handlebars-test-patterns/atoms/global/helloworld-withdata.hbs * Restore packages/core/test/lineage_hunter_tests.js * Restore packages/development-edition-engine-react/source/_meta/_head.html * Restore packages/core/test/pattern_engines_tests.js * Restore packages/core/test/pseudopattern_hunter_tests.js * Restore packages/engine-handlebars/lib/engine_handlebars.js * Restore packages/engine-nunjucks/lib/engine_nunjucks.js * Restore packages/engine-twig-php/lib/engine_twig_php.js * Restore packages/engine-underscore/_meta/_head.html * Restore packages/engine-underscore/lib/engine_underscore.js * Restore packages/uikit-workshop/src/scripts/actions/app.js * chore: regenerated yarn.lock * chore: corrected package.json * fix: we need to import the cjs from handlebars directly * Update webpack.config.js * Update webpack.config.js * Update webpack.config.js * Update webpack.config.js * chore: regenerated yarn.lock * refactor: updated babel-loader dependency again * refactor: updated clean-css-loader dependency again * refactor: updated svgo-loader dependency again --------- Co-authored-by: Maximilian <mfr@nzke.net> Co-authored-by: Josef Bredreck <13408112+JosefBredereck@users.noreply.github.com>
quelltexterin · Jan 30, 2023 · 44d5c4f · 44d5c4f
1 parent e5043c4
commit 44d5c4f
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 75 deletions.
diff --git a/packages/uikit-workshop/build/webpack-server.js b/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',
         })
       );
 

diff --git a/packages/uikit-workshop/package.json b/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"
   },

diff --git a/packages/uikit-workshop/src/html/index.html b/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

diff --git a/packages/uikit-workshop/webpack.config.js b/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,
         }),
       ],
     });