updates to webpack 5

payloadcms · Nov 22, 2020 · 3344656 · 3344656
1 parent e4eece0
commit 3344656
Show file tree

Hide file tree

Showing 4 changed files with 1,948 additions and 2,820 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "body-parser": "^1.19.0",
     "compression": "^1.7.4",
     "connect-history-api-fallback": "^1.6.0",
-    "css-loader": "^1.0.0",
+    "css-loader": "^5.0.1",
     "date-fns": "^2.14.0",
     "deepmerge": "^4.2.2",
     "dotenv": "^6.0.0",
@@ -64,7 +64,7 @@
     "graphql-query-complexity": "^0.7.0",
     "graphql-scalars": "^1.4.0",
     "graphql-type-json": "^0.3.1",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.0.0-alpha.14",
     "http-status": "^1.4.2",
     "ignore-styles": "^5.0.1",
     "is-hotkey": "^0.1.6",
@@ -74,7 +74,7 @@
     "jwt-decode": "^3.0.0",
     "method-override": "^3.0.0",
     "micro-memoize": "^4.0.9",
-    "mini-css-extract-plugin": "^1.0.0",
+    "mini-css-extract-plugin": "1.3.1",
     "minimist": "^1.2.0",
     "mkdirp": "^1.0.4",
     "mongodb-memory-server": "^6.5.2",
@@ -93,10 +93,11 @@
     "pino": "^6.4.1",
     "pino-pretty": "^4.1.0",
     "pluralize": "^8.0.0",
-    "postcss-loader": "^4.0.4",
+    "postcss-loader": "^4.1.0",
     "postcss-preset-env": "^6.7.0",
     "prismjs": "^1.21.0",
     "probe-image-size": "^5.0.0",
+    "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "qs": "^6.9.1",
     "qs-middleware": "^1.0.3",
@@ -112,19 +113,21 @@
     "react-simple-code-editor": "^0.11.0",
     "react-toastify": "^6.1.0",
     "sanitize-filename": "^1.6.3",
-    "sass": "^1.27.0",
-    "sass-loader": "7.1.0",
+    "sass": "^1.29.0",
+    "sass-loader": "^10.1.0",
     "sharp": "^0.25.2",
     "slate": "^0.58.4",
     "slate-history": "^0.58.3",
     "slate-hyperscript": "^0.58.3",
     "slate-react": "^0.58.3",
+    "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^4.2.3",
     "url-loader": "^1.0.1",
     "uuid": "^8.1.0",
-    "webpack": "4.44.2",
+    "webpack": "^5.6.0",
     "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-dev-middleware": "^3.7.2",
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-middleware": "^4.0.2",
     "webpack-hot-middleware": "^2.25.0"
   },
   "devDependencies": {
@@ -206,8 +209,7 @@
     "mongodb": "^3.6.2",
     "nodemon": "^1.19.4",
     "passport-strategy": "^1.0.0",
-    "typescript": "^4.1.2",
-    "webpack-cli": "^4.1.0"
+    "typescript": "^4.1.2"
   },
   "files": [
     "dist",

diff --git a/src/webpack/getWebpackDevConfig.ts b/src/webpack/getWebpackDevConfig.ts
@@ -1,7 +1,6 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import path from 'path';
 import webpack, { Configuration } from 'webpack';
-import MiniCSSExtractPlugin from 'mini-css-extract-plugin';
 import { Config } from '../config/types';
 import babelConfig from '../babel.config';
 
@@ -22,6 +21,7 @@ export default (config: Config): Configuration => {
     },
     devtool: 'inline-source-map',
     mode: 'development',
+    stats: 'errors-only',
     resolveLoader: {
       modules: ['node_modules', path.join(__dirname, '../../node_modules')],
     },
@@ -38,43 +38,43 @@ export default (config: Config): Configuration => {
           ],
         },
         {
-          oneOf: [
+          test: /\.(scss|css)$/,
+          sideEffects: true,
+          use: [
+            'style-loader',
+            'css-loader',
             {
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              loader: require.resolve('url-loader'),
+              loader: 'postcss-loader',
               options: {
-                limit: 10000,
-                name: 'static/media/[name].[hash:8].[ext]',
+                postcssOptions: {
+                  plugins: ['postcss-preset-env'],
+                },
               },
             },
+            'sass-loader',
+          ],
+        },
+        {
+          oneOf: [
             {
-              test: /\.(sa|sc|c)ss$/,
-              use: [
-                MiniCSSExtractPlugin.loader,
-                'css-loader',
-                {
-                  loader: 'postcss-loader',
-                  options: {
-                    postcssOptions: {
-                      plugins: ['postcss-preset-env'],
-                    },
-                  },
-                },
-                'sass-loader',
-              ],
+              test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
+              type: 'asset/resource',
             },
             {
-              exclude: [/\.((t|j)s|(t|j)sx|mjs)$/, /\.html$/, /\.json$/],
-              loader: require.resolve('file-loader'),
-              options: {
-                name: 'static/media/[name].[hash:8].[ext]',
-              },
+              test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
+              type: 'asset/inline',
             },
           ],
         },
       ],
     },
     resolve: {
+      fallback: {
+        path: require.resolve('path-browserify'),
+        crypto: false,
+        https: false,
+        http: false,
+      },
       modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],
       alias: {
         'payload/unsanitizedConfig': config.paths.config,
@@ -83,6 +83,9 @@ export default (config: Config): Configuration => {
       extensions: ['.ts', '.tsx', '.js', '.json'],
     },
     plugins: [
+      new webpack.ProvidePlugin(
+        { process: 'process/browser' },
+      ),
       new webpack.DefinePlugin(
         Object.entries(config.publicENV).reduce(
           (values, [key, val]) => ({
@@ -100,9 +103,6 @@ export default (config: Config): Configuration => {
         filename: './index.html',
       }),
       new webpack.HotModuleReplacementPlugin(),
-      new MiniCSSExtractPlugin({
-        ignoreOrder: true,
-      }),
     ],
   };
 

diff --git a/src/webpack/init.ts b/src/webpack/init.ts
@@ -1,18 +1,17 @@
 import webpack from 'webpack';
-import express from 'express';
+import express, { Router } from 'express';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import getWebpackDevConfig from './getWebpackDevConfig';
 
 const router = express.Router();
 
-function initWebpack() {
+function initWebpack(): Router {
   const webpackDevConfig = getWebpackDevConfig(this.config);
   const compiler = webpack(webpackDevConfig);
 
   router.use(webpackDevMiddleware(compiler, {
-    publicPath: webpackDevConfig.output.publicPath,
-    stats: 'errors-only',
+    publicPath: webpackDevConfig.output.publicPath as string,
   }));
 
   router.use(webpackHotMiddleware(compiler));