Upgrade to webpack v5

schrodinger · Oct 8, 2024 · 98313a6 · 98313a6
1 parent d806994
commit 98313a6
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -77,7 +77,6 @@
     "rollup-plugin-terser": "^7.0.2",
     "style-loader": "1.0.0",
     "terser-webpack-plugin": "4.2.3",
-    "url-loader": "2.1.0",
     "webpack": "^5.94.0",
     "webpack-cli": "^4.3.0",
     "webpack-dev-server": "^4.7.4"

diff --git a/site/webpack-client.config.js b/site/webpack-client.config.js
@@ -3,7 +3,8 @@ const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
-const isDev = process.env.NODE_ENV !== 'production';
+const nodeEnv = process.env.NODE_ENV ?? 'development';
+const isDev = nodeEnv !== 'production';
 
 module.exports = {
   mode: isDev ? 'development' : 'production',
@@ -14,7 +15,7 @@ module.exports = {
 
   output: {
     path: path.resolve(__dirname, '../__site__/'),
-    filename: isDev ? '[name].js' : '[name]-[hash].js',
+    filename: isDev ? '[name].js' : '[name]-[contentHash].js',
     publicPath: '',
   },
 
@@ -24,10 +25,15 @@ module.exports = {
     rules: [
       {
         test: /\.md$/,
-        loader: [
-          'html-loader?{"minimize":false}',
+        use: [
+          {
+            loader: 'html-loader',
+            options: {
+              minimize: false,
+            },
+          },
           path.join(__dirname, '../build_helpers/markdownLoader'),
-        ].join('!'),
+        ],
       },
       {
         test: /\.js$/,
@@ -63,8 +69,10 @@ module.exports = {
       },
       {
         test: /\.png$/,
-        loader: 'file-loader',
-        query: { mimetype: 'image/png', name: 'images/[name]-[hash].[ext]' },
+        type: 'asset/resource',
+        generator: {
+          filename: 'images/[name]-[contentHash].[ext]',
+        },
       },
     ],
   },
@@ -74,6 +82,9 @@ module.exports = {
       'fixed-data-table-2/css': path.join(__dirname, '../src/css'),
       'fixed-data-table-2': path.join(__dirname, '../src/index'),
     },
+    fallback: {
+      url: false,
+    },
   },
 
   devServer: {
@@ -83,10 +94,10 @@ module.exports = {
 
   plugins: [
     new MiniCssExtractPlugin({
-      filename: isDev ? '[name].css' : '[name]-[hash].css',
+      filename: isDev ? '[name].css' : '[name]-[contentHash].css',
     }),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      'process.env.NODE_ENV': JSON.stringify(nodeEnv),
       // 'process.env.NODE_ENV': JSON.stringify('production'),
       __DEV__: isDev,
     }),

diff --git a/site/webpack-prerender.config.js b/site/webpack-prerender.config.js
@@ -2,6 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 
+const nodeEnv = process.env.NODE_ENV ?? 'development';
 const isDev = process.env.NODE_ENV !== 'production';
 
 module.exports = {
@@ -12,7 +13,9 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, '../__site_prerender__/'),
     filename: 'renderPath.js',
-    libraryTarget: 'commonjs2',
+    library: {
+      type: 'commonjs2',
+    },
   },
 
   target: 'node',
@@ -21,10 +24,15 @@ module.exports = {
     rules: [
       {
         test: /\.md$/,
-        loader: [
-          'html-loader?{"minimize":false}',
+        use: [
+          {
+            loader: 'html-loader',
+            options: {
+              minimize: false,
+            },
+          },
           path.join(__dirname, '../build_helpers/markdownLoader'),
-        ].join('!'),
+        ],
       },
       {
         test: /\.js$/,
@@ -41,8 +49,10 @@ module.exports = {
       },
       {
         test: /\.png$/,
-        loader: 'file-loader',
-        query: { mimetype: 'image/png', name: 'images/[name]-[hash].[ext]' },
+        type: 'asset/resource',
+        generator: {
+          filename: 'images/[name]-[contentHash].[ext]',
+        },
       },
     ],
   },
@@ -52,11 +62,14 @@ module.exports = {
       'fixed-data-table-2/css': path.join(__dirname, '../src/css'),
       'fixed-data-table-2': path.join(__dirname, '../src/index'),
     },
+    fallback: {
+      url: false,
+    },
   },
 
   plugins: [
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      'process.env.NODE_ENV': JSON.stringify(nodeEnv),
       __DEV__: isDev,
     }),
   ],

diff --git a/yarn.lock b/yarn.lock
@@ -5997,11 +5997,6 @@ [email protected], mime@^1.4.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.4.4:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
-  integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
-
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -8253,15 +8248,6 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-[email protected]:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.1.0.tgz#bcc1ecabbd197e913eca23f5e0378e24b4412961"
-  integrity sha512-kVrp/8VfEm5fUt+fl2E0FQyrpmOYgMEkBsv8+UDP1wFhszECq5JyGF33I7cajlVY90zRZ6MyfgKXngLvHYZX8A==
-  dependencies:
-    loader-utils "^1.2.3"
-    mime "^2.4.4"
-    schema-utils "^2.0.0"
-
 url-parse@^1.5.3:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"