Merge pull request #3465 from jasongrout/webpackassets

ibdafna · web-flow · commit a79655d74809 · 2022-05-19T22:30:56.000-07:00
Convert webpack configs to use assets instead of individual loaders
diff --git a/examples/web1/webpack.config.js b/examples/web1/webpack.config.js
@@ -12,10 +12,4 @@ module.exports = {
   module: {
     rules: [{ test: /\.css$/i, use: ['style-loader', 'css-loader'] }],
   },
-  plugins: [
-    new webpack.DefinePlugin({
-      // Needed for Blueprint. See https://github.com/palantir/blueprint/issues/4393
-      'process.env': '{}',
-    }),
-  ],
 };
diff --git a/examples/web2/webpack.config.js b/examples/web2/webpack.config.js
@@ -18,10 +18,4 @@ module.exports = {
       { test: /\.svg$/i, type: 'asset' },
     ],
   },
-  plugins: [
-    new webpack.DefinePlugin({
-      // Needed for Blueprint. See https://github.com/palantir/blueprint/issues/4393
-      'process.env': '{}',
-    }),
-  ],
 };
diff --git a/examples/web3/webpack.config.js b/examples/web3/webpack.config.js
@@ -18,10 +18,4 @@ module.exports = {
       { test: /\.svg$/i, type: 'asset' },
     ],
   },
-  plugins: [
-    new webpack.DefinePlugin({
-      // Needed for Blueprint. See https://github.com/palantir/blueprint/issues/4393
-      'process.env': '{}',
-    }),
-  ],
 };
diff --git a/examples/web4/webpack.config.js b/examples/web4/webpack.config.js
@@ -17,10 +17,4 @@ module.exports = {
       { test: /\.svg$/i, type: 'asset' },
     ],
   },
-  plugins: [
-    new webpack.DefinePlugin({
-      // Needed for Blueprint. See https://github.com/palantir/blueprint/issues/4393
-      'process.env': '{}',
-    }),
-  ],
 };
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,56 +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: [
-    new webpack.DefinePlugin({
-      // Needed for Blueprint. See https://github.com/palantir/blueprint/issues/4393
-      'process.env': '{}',
-    }),
-  ],
 };
diff --git a/packages/html-manager/webpack.config.js b/packages/html-manager/webpack.config.js
@@ -4,63 +4,12 @@
 // Here we generate the /dist files that allow widget embedding
 
 var path = require('path');
-var webpack = require('webpack');
-
-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',
-      },
-    },
-  },
-];
-
-var plugins = [
-  new webpack.DefinePlugin({
-    // Needed for Blueprint. See https://github.com/palantir/blueprint/issues/4393
-    'process.env': '{}',
-  }),
+  { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource' },
+  { test: /\.svg$/i, type: 'asset' },
 ];
 
 module.exports = [
@@ -74,7 +23,6 @@ module.exports = [
     devtool: 'source-map',
     module: { rules: rules },
     mode: 'production',
-    plugins: plugins,
   },
   {
     // script that renders widgets using the amd embedding and can render third-party custom widgets
@@ -85,7 +33,6 @@ module.exports = [
     },
     module: { rules: rules },
     mode: 'production',
-    plugins: plugins,
   },
   {
     // embed library that depends on requirejs, and can load third-party widgets dynamically
@@ -98,7 +45,6 @@ module.exports = [
     },
     module: { rules: rules },
     mode: 'production',
-    plugins: plugins,
   },
   {
     // @jupyter-widgets/html-manager
@@ -112,7 +58,6 @@ module.exports = [
     module: { rules: rules },
     externals: ['@jupyter-widgets/base', '@jupyter-widgets/controls'],
     mode: 'production',
-    plugins: plugins,
   },
   {
     // @jupyter-widgets/base
@@ -125,7 +70,6 @@ module.exports = [
     },
     module: { rules: rules },
     mode: 'production',
-    plugins: plugins,
   },
   {
     // @jupyter-widgets/controls
@@ -139,6 +83,5 @@ module.exports = [
     module: { rules: rules },
     externals: ['@jupyter-widgets/base'],
     mode: 'production',
-    plugins: 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
diff --git a/yarn.lock b/yarn.lock
