Use webpack externals to exclude dependencies (#3036)

_scripts/webpack.renderer.config.js

@@ -32,6 +32,10 @@ const config = {
     path: path.join(__dirname, '../dist'),
     filename: '[name].js',
   },
+  externals: {
+    // ignore linkedom's unnecessary broken canvas import, as youtubei.js only uses linkedom to generate DASH manifests
+    canvas: '{}'
+  },
   module: {
     rules: [
       {
@@ -122,10 +126,6 @@ const config = {
     new MiniCssExtractPlugin({
       filename: isDevMode ? '[name].css' : '[name].[contenthash].css',
       chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css',
-    }),
-    // ignore linkedom's unnecessary broken canvas import, as youtubei.js only uses linkedom to generate DASH manifests
-    new webpack.IgnorePlugin({
-      resourceRegExp: /^canvas$/
     })
   ],
   resolve: {

_scripts/webpack.web.config.js

@@ -22,9 +22,17 @@ const config = {
     path: path.join(__dirname, '../dist/web'),
     filename: '[name].js',
   },
-  externals: {
-    electron: '{}'
-  },
+  externals: [
+    {
+      electron: '{}'
+    },
+    ({ request }, callback) => {
+      if (request.startsWith('youtubei.js')) {
+        return callback(null, '{}')
+      }
+      callback()
+    }
+  ],
   module: {
     rules: [
       {
@@ -122,10 +130,6 @@ const config = {
     new MiniCssExtractPlugin({
       filename: isDevMode ? '[name].css' : '[name].[contenthash].css',
       chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css',
-    }),
-    // ignore all youtubei.js imports, even the ones with paths in them
-    new webpack.IgnorePlugin({
-      resourceRegExp: /^youtubei\.js/
     })
   ],
   resolve: {