Update webpack config files to use assets instead of file/raw/url loaders

jasongrout · jasongrout · commit 723e3ad7f8a2 · 2022-05-19T17:53:51.000-06:00
diff --git a/packages/base-manager/test/webpack-cov.conf.js b/packages/base-manager/test/webpack-cov.conf.js
@@ -9,10 +9,14 @@ module.exports = {
   bail: true,
   module: {
     loaders: [
-      { test: /\.ipynb$/, use: 'json-loader' },
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.md$/, use: 'raw-loader' },
-      { test: /\.html$/, use: 'file-loader' },
+      { test: /\.md$/, type: 'asset/source' },
+      {
+        test: /\.html$/,
+        type: 'asset/resource',
+        generator: { filename: '[name].[ext]' },
+      },
+      { test: /\.ipynb$/, type: 'json' },
     ],
     preLoaders: [
       // instrument only testing sources with Istanbul
diff --git a/packages/base-manager/test/webpack.conf.js b/packages/base-manager/test/webpack.conf.js
@@ -10,12 +10,13 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.md$/, use: 'raw-loader' },
+      { test: /\.md$/, type: 'asset/source' },
       {
         test: /\.html$/,
-        use: { loader: 'file-loader', options: { name: '[name].[ext]' } },
+        type: 'asset/resource',
+        generator: { filename: '[name].[ext]' },
       },
-      { test: /\.ipynb$/, use: 'json-loader' },
+      { test: /\.ipynb$/, type: 'json' },
     ],
   },
   mode: 'development',
diff --git a/packages/base/test/webpack-cov.conf.js b/packages/base/test/webpack-cov.conf.js
@@ -9,13 +9,14 @@ module.exports = {
   bail: true,
   module: {
     loaders: [
-      { test: /\.ipynb$/, use: 'json-loader' },
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.md$/, use: 'raw-loader' },
+      { test: /\.md$/, type: 'asset/source' },
       {
         test: /\.html$/,
-        use: { loader: 'file-loader', options: { name: '[name].[ext]' } },
+        type: 'asset/resource',
+        generator: { filename: '[name].[ext]' },
       },
+      { test: /\.ipynb$/, type: 'json' },
     ],
     preLoaders: [
       // instrument only testing sources with Istanbul
diff --git a/packages/base/test/webpack.conf.js b/packages/base/test/webpack.conf.js
@@ -10,12 +10,13 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.md$/, use: 'raw-loader' },
+      { test: /\.md$/, type: 'asset/source' },
       {
         test: /\.html$/,
-        use: { loader: 'file-loader', options: { name: '[name].[ext]' } },
+        type: 'asset/resource',
+        generator: { filename: '[name].[ext]' },
       },
-      { test: /\.ipynb$/, use: 'json-loader' },
+      { test: /\.ipynb$/, type: 'json' },
     ],
   },
   mode: 'development',
diff --git a/packages/controls/karma.conf.js b/packages/controls/karma.conf.js
@@ -31,26 +31,9 @@ module.exports = function (config) {
             loader: 'babel?presets[]=es2015',
           },
           { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-          // jquery-ui loads some images
-          { test: /\.(jpg|png|gif)$/, use: 'file-loader' },
           // required to load font-awesome
-          {
-            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-            use: 'url-loader?limit=10000&mimetype=application/font-woff',
-          },
-          {
-            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-            use: 'url-loader?limit=10000&mimetype=application/font-woff',
-          },
-          {
-            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-            use: 'url-loader?limit=10000&mimetype=application/octet-stream',
-          },
-          { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' },
-          {
-            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-            use: 'url?limit=10000&mimetype=image/svg+xml',
-          },
+          { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
+          { test: /\.svg$/i, type: 'asset' },
         ],
       },
       externals: {
diff --git a/packages/controls/package.json b/packages/controls/package.json
@@ -56,7 +56,6 @@
     "chai": "^4.0.0",
     "css-loader": "^6.5.1",
     "expect.js": "^0.3.1",
-    "file-loader": "^6.2.0",
     "istanbul-instrumenter-loader": "^3.0.1",
     "karma": "^6.3.3",
     "karma-chrome-launcher": "^3.1.0",
@@ -79,7 +78,6 @@
     "sinon-chai": "^3.3.0",
     "style-loader": "^3.3.1",
     "typescript": "~4.3.2",
-    "url-loader": "^4.1.1",
     "webpack": "^5.65.0"
   }
 }
diff --git a/packages/controls/test/webpack-cov.conf.js b/packages/controls/test/webpack-cov.conf.js
@@ -9,13 +9,14 @@ module.exports = {
   bail: true,
   module: {
     loaders: [
-      { test: /\.ipynb$/, use: 'json-loader' },
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.md$/, use: 'raw-loader' },
+      { test: /\.md$/, type: 'asset/source' },
       {
         test: /\.html$/,
-        use: { loader: 'file-loader', options: { name: '[name].[ext]' } },
+        type: 'asset/resource',
+        generator: { filename: '[name].[ext]' },
       },
+      { test: /\.ipynb$/, type: 'json' },
     ],
     preLoaders: [
       // instrument only testing sources with Istanbul
diff --git a/packages/controls/test/webpack.conf.js b/packages/controls/test/webpack.conf.js
@@ -10,12 +10,13 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.md$/, loader: 'raw-loader' },
+      { test: /\.md$/, type: 'asset/source' },
       {
         test: /\.html$/,
-        use: { loader: 'file-loader', options: { name: '[name].[ext]' } },
+        type: 'asset/resource',
+        generator: { filename: '[name].[ext]' },
       },
-      { test: /\.ipynb$/, loader: 'json-loader' },
+      { test: /\.ipynb$/, type: 'json' },
     ],
   },
   mode: 'development',
diff --git a/packages/html-manager/package.json b/packages/html-manager/package.json
@@ -55,7 +55,6 @@
     "@types/sanitize-html": "^2.6.0",
     "chai": "^4.0.0",
     "css-loader": "^6.5.1",
-    "file-loader": "^6.2.0",
     "karma": "^6.3.3",
     "karma-chrome-launcher": "^3.1.0",
     "karma-firefox-launcher": "^2.1.1",
@@ -70,7 +69,6 @@
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.1",
     "typescript": "~4.3.2",
-    "url-loader": "^4.1.1",
     "webpack": "^5.65.0",
     "webpack-cli": "^4.7.2"
   }
diff --git a/packages/html-manager/test/webpack.conf.js b/packages/html-manager/test/webpack.conf.js
@@ -44,50 +44,9 @@ module.exports = {
           },
         ],
       },
-      // jquery-ui loads some images
-      { test: /\.(jpg|png|gif)$/, use: 'file-loader' },
       // required to load font-awesome
-      {
-        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/font-woff',
-          },
-        },
-      },
-      {
-        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/font-woff',
-          },
-        },
-      },
-      {
-        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/octet-stream',
-          },
-        },
-      },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' },
-      {
-        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'image/svg+xml',
-          },
-        },
-      },
+      { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
+      { test: /\.svg$/i, type: 'asset' },
     ],
   },
   plugins: [
diff --git a/packages/html-manager/webpack.config.js b/packages/html-manager/webpack.config.js
@@ -10,50 +10,9 @@ var version = require('./package.json').version;
 
 var rules = [
   { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-  // jquery-ui loads some images
-  { test: /\.(jpg|png|gif)$/, use: 'file-loader' },
   // required to load font-awesome
-  {
-    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-    use: {
-      loader: 'url-loader',
-      options: {
-        limit: 10000,
-        mimetype: 'application/font-woff',
-      },
-    },
-  },
-  {
-    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-    use: {
-      loader: 'url-loader',
-      options: {
-        limit: 10000,
-        mimetype: 'application/font-woff',
-      },
-    },
-  },
-  {
-    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-    use: {
-      loader: 'url-loader',
-      options: {
-        limit: 10000,
-        mimetype: 'application/octet-stream',
-      },
-    },
-  },
-  { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' },
-  {
-    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-    use: {
-      loader: 'url-loader',
-      options: {
-        limit: 10000,
-        mimetype: 'image/svg+xml',
-      },
-    },
-  },
+  { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
+  { test: /\.svg$/i, type: 'asset' },
 ];
 
 var plugins = [
diff --git a/python/widgetsnbextension/package.json b/python/widgetsnbextension/package.json
@@ -35,7 +35,6 @@
     "css-loader": "^6.5.1",
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.1",
-    "url-loader": "^4.1.1",
     "webpack": "^5.65.0",
     "webpack-cli": "^4.7.2"
   }
diff --git a/python/widgetsnbextension/webpack.config.js b/python/widgetsnbextension/webpack.config.js
@@ -10,50 +10,9 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      // jquery-ui loads some images
-      { test: /\.(jpg|png|gif)$/, use: 'file-loader' },
       // required to load font-awesome
-      {
-        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/font-woff',
-          },
-        },
-      },
-      {
-        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/font-woff',
-          },
-        },
-      },
-      {
-        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'application/octet-stream',
-          },
-        },
-      },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader' },
-      {
-        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            mimetype: 'image/svg+xml',
-          },
-        },
-      },
+      { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
+      { test: /\.svg$/i, type: 'asset' },
     ],
   },
 };
diff --git a/yarn.lock b/yarn.lock
@@ -4708,14 +4708,6 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-file-loader@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
-  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-
 file-loader@~6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f"
@@ -10374,7 +10366,7 @@ url-join@^4.0.1:
   resolved "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz#b642e21a2646808ffa178c4c5fda39844e12cde7"
   integrity sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==
 
-url-loader@^4.1.1, url-loader@~4.1.0:
+url-loader@~4.1.0:
   version "4.1.1"
   resolved "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
   integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
