Webpack 5 (#573)

* Webpack 5

* Bump

* Small cleanup

* Update packages/extension/webpack.config.js

package.json

@@ -36,23 +36,12 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@polkadot/dev": "^0.60.23",
+    "@polkadot/dev": "^0.60.24",
     "@types/jest": "^26.0.19",
-    "babel-loader": "^8.2.2",
-    "browser-resolve": "^2.0.0",
-    "copy-webpack-plugin": "^6.3.2",
-    "extract-loader": "^5.1.0",
-    "file-loader": "^6.2.0",
-    "html-loader": "^1.3.2",
     "i18next-scanner": "^2.11.0",
     "sinon-chrome": "^3.0.1",
     "stylelint": "^13.8.0",
     "stylelint-config-recommended": "^3.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "thread-loader": "^2.1.3",
-    "url-loader": "^4.1.1",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-extension-manifest-plugin": "^0.5.0"
+    "stylelint-config-styled-components": "^0.1.1"
   }
 }

packages/extension/package.json

@@ -11,6 +11,22 @@
     "@polkadot/extension-ui": "^0.35.2-8"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.60.23"
+    "@polkadot/dev": "^0.60.24",
+    "babel-loader": "^8.2.2",
+    "browser-resolve": "^2.0.0",
+    "buffer": "^6.0.3",
+    "copy-webpack-plugin": "^7.0.0",
+    "crypto-browserify": "^3.12.0",
+    "extract-loader": "^5.1.0",
+    "file-loader": "^6.2.0",
+    "html-loader": "^1.3.2",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "stream-browserify": "^3.0.0",
+    "thread-loader": "^3.0.1",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.10.0",
+    "webpack-cli": "^4.2.0",
+    "webpack-extension-manifest-plugin": "^0.6.0"
   }
 }

packages/extension/webpack.config.js

@@ -18,109 +18,92 @@ const packages = [
   'extension-ui'
 ];
 
-function createWebpack ({ alias = {}, context }) {
-  const ENV = process.env.NODE_ENV || 'development';
-  const isProd = ENV === 'production';
-
-  return {
-    context,
-    devtool: false,
-    entry: {
-      background: './src/background.ts',
-      content: './src/content.ts',
-      extension: './src/extension.ts',
-      page: './src/page.ts'
-    },
-    mode: ENV,
-    module: {
-      rules: [
-        {
-          include: /node_modules/,
-          test: /\.mjs$/,
-          type: 'javascript/auto'
-        },
-        {
-          exclude: /(node_modules)/,
-          test: /\.(js|ts|tsx)$/,
-          use: [
-            require.resolve('thread-loader'),
-            {
-              loader: require.resolve('babel-loader'),
-              options: require('@polkadot/dev/config/babel-config-cjs.cjs')
-            }
-          ]
-        },
-        {
-          test: [/\.svg$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.woff2?$/],
-          use: [
-            {
-              loader: require.resolve('url-loader'),
-              options: {
-                esModule: false,
-                limit: 10000,
-                name: 'static/[name].[ext]'
-              }
-            }
-          ]
-        }
-      ]
-    },
-    node: {
-      child_process: 'empty',
-      dgram: 'empty',
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty'
-    },
-    optimization: {
-      concatenateModules: false,
-      moduleIds: 'natural',
-      occurrenceOrder: false,
-      providedExports: false,
-      sideEffects: false,
-      usedExports: false
-    },
-    output: {
-      chunkFilename: '[name].js',
-      filename: '[name].js',
-      globalObject: '(typeof self !== \'undefined\' ? self : this)',
-      path: path.join(context, 'build')
-    },
-    performance: {
-      hints: false
-    },
-    plugins: [
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-      new webpack.DefinePlugin({
-        'process.env': {
-          NODE_ENV: JSON.stringify(ENV),
-          PKG_NAME: JSON.stringify(pkgJson.name),
-          PKG_VERSION: JSON.stringify(pkgJson.version)
-        }
-      }),
-      new CopyPlugin({ patterns: [{ from: 'public' }] }),
-      new ManifestPlugin({
-        config: {
-          base: manifest,
-          extend: {
-            version: pkgJson.version.split('-')[0] // remove possible -beta.xx
+module.exports = {
+  context: __dirname,
+  devtool: false,
+  entry: {
+    background: './src/background.ts',
+    content: './src/content.ts',
+    extension: './src/extension.ts',
+    page: './src/page.ts'
+  },
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        include: /node_modules/,
+        test: /\.mjs$/,
+        type: 'javascript/auto'
+      },
+      {
+        exclude: /(node_modules)/,
+        test: /\.(js|ts|tsx)$/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: require('@polkadot/dev/config/babel-config-cjs.cjs')
           }
+        ]
+      },
+      {
+        test: [/\.svg$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.woff2?$/],
+        use: [
+          {
+            loader: require.resolve('url-loader'),
+            options: {
+              esModule: false,
+              limit: 10000,
+              name: 'static/[name].[ext]'
+            }
+          }
+        ]
+      }
+    ]
+  },
+  output: {
+    chunkFilename: '[name].js',
+    filename: '[name].js',
+    globalObject: '(typeof self !== \'undefined\' ? self : this)',
+    path: path.join(__dirname, 'build')
+  },
+  performance: {
+    hints: false
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+      process: 'process/browser'
+    }),
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+        PKG_NAME: JSON.stringify(pkgJson.name),
+        PKG_VERSION: JSON.stringify(pkgJson.version)
+      }
+    }),
+    new CopyPlugin({ patterns: [{ from: 'public' }] }),
+    new ManifestPlugin({
+      config: {
+        base: manifest,
+        extend: {
+          version: pkgJson.version.split('-')[0] // remove possible -beta.xx
         }
-      })
-    ].filter((entry) => entry),
-    resolve: {
-      alias,
-      extensions: ['.js', '.jsx', '.ts', '.tsx']
-    },
-    watch: !isProd
-  };
-}
+      }
+    })
+  ],
+  resolve: {
+    alias: packages.reduce((alias, pkg) => {
+      alias[`@polkadot/${pkg}`] = path.resolve(__dirname, `../${pkg}/src`);
 
-module.exports = createWebpack({
-  alias: packages.reduce((alias, pkg) => {
-    alias[`@polkadot/${pkg}`] = path.resolve(__dirname, `../${pkg}/src`);
-
-    return alias;
-  }, {}),
-  context: __dirname
-});
+      return alias;
+    }, {}),
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    fallback: {
+      crypto: require.resolve('crypto-browserify'),
+      path: require.resolve('path-browserify'),
+      stream: require.resolve('stream-browserify')
+    }
+  },
+  watch: false
+};