Webpack 5 (#4208)

* Webpack 5 * Config, build works * dev server
2020-12-14 16:39:04 +01:00 · 2020-12-14 16:39:04 +01:00 · c0d99ef01b
commit c0d99ef01b
parent 765ae449f4
7 changed files with 1508 additions and 1028 deletions
--- a/package.json
+++ b/package.json
@ -34,12 +34,12 @@
    "build:release:ghpages": "yarn polkadot-ci-ghact-docs",
    "build:release:www": "yarn polkadot-ci-ghact-build && yarn build:release:ipfs && yarn build:release:ghpages",
    "build:robohash": "node scripts/robohash.js",
-    "build:www": "rm -rf packages/apps/build && mkdir -p packages/apps/build && yarn run build:i18n && cd packages/apps && NODE_ENV=production webpack --config webpack.config.js",
+    "build:www": "rm -rf packages/apps/build && mkdir -p packages/apps/build && yarn run build:i18n && cd packages/apps && NODE_ENV=production webpack --config webpack.config.js --mode production",
    "build:electron": "yarn clean:electronBuild && yarn build:electronMain && yarn build:electronRenderer",
-    "build:devElectronRenderer": "cd packages/apps-electron && NODE_ENV=development webpack --config webpack.renderer.config.js",
-    "build:electronRenderer": "cd packages/apps-electron && NODE_ENV=production webpack --config webpack.renderer.config.js",
-    "build:devElectronMain": "cd packages/apps-electron && NODE_ENV=development webpack --config webpack.main.config.js",
-    "build:electronMain": "cd packages/apps-electron && NODE_ENV=production webpack --config webpack.main.config.js",
+    "build:devElectronRenderer": "cd packages/apps-electron && yarn webpack --config webpack.renderer.config.js --mode development",
+    "build:electronRenderer": "cd packages/apps-electron && NODE_ENV=production yarn webpack --config webpack.renderer.config.js --mode production",
+    "build:devElectronMain": "cd packages/apps-electron && yarn webpack --config webpack.main.config.js --mode development",
+    "build:electronMain": "cd packages/apps-electron && NODE_ENV=production yarn webpack --config webpack.main.config.js --mode production",
    "packElectron:test": "yarn build:release:electron && electron-builder --dir",
    "packElectron:mac": "yarn build:release:electron && electron-builder build --mac",
    "packElectron:win": "yarn build:release:electron && electron-builder build --win",
@ -57,7 +57,7 @@
    "test": "polkadot-dev-run-test --selectProjects=fast-tests --silent --testPathIgnorePatterns slow --testNamePattern='^((?!--SLOW--).)*$'",
    "test:all": "polkadot-dev-run-test --selectProjects=all-tests --silent",
    "test:one": "polkadot-dev-run-test",
-    "start": "yarn clean && cd packages/apps && webpack --config webpack.config.js",
+    "start": "yarn clean && cd packages/apps && yarn webpack --config webpack.config.js --mode development --watch",
    "start:electron": "yarn clean:electronBuild && concurrently 'yarn build:devElectronMain && cd packages/apps-electron && electron ./build/electron.js' 'yarn build:devElectronRenderer'"
  },
  "devDependencies": {
@ -92,11 +92,6 @@
    "styled-components": "^5.2.1",
    "stylelint": "^13.8.0",
    "stylelint-config-recommended": "^3.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "terser-webpack-plugin": "^4.2.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "webpack-merge": "^5.4.0",
-    "webpack-plugin-serve": "^1.2.1"
+    "stylelint-config-styled-components": "^0.1.1"
  }
 }
--- a/packages/apps-electron/package.json
+++ b/packages/apps-electron/package.json
@ -15,12 +15,12 @@
    "@types/react-dom": "^17.0.0",
    "@types/tmp": "^0.2.0",
    "babel-loader": "^8.2.2",
-    "copy-webpack-plugin": "^6.3.2",
+    "copy-webpack-plugin": "^7.0.0",
    "html-webpack-plugin": "^4.5.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "thread-loader": "^3.0.1",
    "tmp": "^0.2.1",
-    "webpack": "^4.44.2"
+    "webpack": "^5.10.1"
  }
 }
--- a/packages/apps-electron/webpack.main.config.js
+++ b/packages/apps-electron/webpack.main.config.js
@ -3,13 +3,9 @@

 /* eslint-disable camelcase */

-const TerserPlugin = require('terser-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');

-const ENV = process.env.NODE_ENV || 'production';
-const isProd = ENV === 'production';
-
 function createWebpack () {
  return [
    {
@ -17,7 +13,6 @@ function createWebpack () {
        electron: './src/electron',
        preload: './src/preload.ts'
      },
-      mode: ENV,
      module: {
        rules: [
          {
@ -32,18 +27,15 @@ function createWebpack () {
              require.resolve('thread-loader'),
              {
                loader: require.resolve('babel-loader'),
-                options: require('@polkadot/dev/config/babel-config-cjs.cjs')
+                options: require('@polkadot/dev/config/babel-config-webpack.cjs')
              }
            ]
          }
        ]
      },
      node: {
-        __dirname: false
-      },
-      optimization: {
-        minimize: !!isProd,
-        minimizer: [new TerserPlugin()]
+        __dirname: false,
+        __filename: false
      },
      output: {
        filename: '[name].js',
--- a/packages/apps-electron/webpack.renderer.config.js
+++ b/packages/apps-electron/webpack.renderer.config.js
@ -11,13 +11,11 @@ const { merge } = require('webpack-merge');
 const baseConfig = require('../apps/webpack.base.config');

 const ENV = process.env.NODE_ENV || 'production';
-const isProd = ENV === 'production';
 const context = __dirname;

 module.exports = merge(
  baseConfig(ENV, context),
  {
-    devtool: isProd ? 'none' : 'source-map',
    plugins: [
      // It must be placed before HtmlWebpackPlugin
      new CopyWebpackPlugin({ patterns: [{ from: '../apps/public' }] }),
--- a/packages/apps/package.json
+++ b/packages/apps/package.json
@ -29,18 +29,27 @@
  "devDependencies": {
    "@types/punycode": "^2.1.0",
    "babel-loader": "^8.2.2",
-    "copy-webpack-plugin": "^6.3.2",
-    "css-loader": "^4.3.0",
+    "buffer": "^6.0.3",
+    "copy-webpack-plugin": "^7.0.0",
+    "crypto-browserify": "^3.12.0",
+    "css-loader": "^5.0.1",
    "empty": "^0.10.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "markdown-loader": "^6.0.0",
-    "mini-css-extract-plugin": "^0.11.3",
+    "mini-css-extract-plugin": "^1.3.3",
    "null-loader": "^4.0.1",
-    "style-loader": "^1.3.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "^2.0.0",
    "thread-loader": "^3.0.1",
    "url-loader": "^4.1.1",
-    "webpack": "^4.44.2"
+    "webpack": "^5.10.1",
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.7.0",
+    "webpack-plugin-serve": "^1.2.1"
  }
 }
--- a/packages/apps/webpack.base.config.js
+++ b/packages/apps/webpack.base.config.js
@ -5,10 +5,11 @@

 const fs = require('fs');
 const path = require('path');
-const webpack = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack');
 const { WebpackPluginServe } = require('webpack-plugin-serve');
+
 const findPackages = require('../../scripts/findPackages');

 function mapChunks (name, regs, inc) {
@ -90,7 +91,7 @@ function createWebpack (ENV, context) {
            require.resolve('thread-loader'),
            {
              loader: require.resolve('babel-loader'),
-              options: require('@polkadot/dev/config/babel-config-cjs.cjs')
+              options: require('@polkadot/dev/config/babel-config-webpack.cjs')
            }
          ]
        },
@ -110,7 +111,7 @@ function createWebpack (ENV, context) {
              options: {
                esModule: false,
                limit: 10000,
-                name: 'static/[name].[hash:8].[ext]'
+                name: 'static/[name].[contenthash:8].[ext]'
              }
            }
          ]
@ -123,7 +124,7 @@ function createWebpack (ENV, context) {
              loader: require.resolve('file-loader'),
              options: {
                esModule: false,
-                name: 'static/[name].[hash:8].[ext]'
+                name: 'static/[name].[contenthash:8].[ext]'
              }
            }
          ]
@ -140,11 +141,8 @@ function createWebpack (ENV, context) {
      ]
    },
    node: {
-      child_process: 'empty',
-      dgram: 'empty',
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty'
+      __dirname: false,
+      __filename: false
    },
    optimization: {
      runtimeChunk: 'single',
@ -158,7 +156,7 @@ function createWebpack (ENV, context) {
          ...mapChunks('polkadot', [
            /* 00 */ /node_modules\/@polkadot\/(wasm)/,
            /* 01 */ /node_modules\/(@polkadot\/(api|metadata|rpc|types))/,
-            /* 02 */ /node_modules\/(@polkadot\/(extension|keyring|networks|react|ui|util|vanitygen)|@acala-network|@edgeware|@laminar|@ledgerhq|@open-web3|@sora-substrate|@subsocial|@zondax|edgeware)/
+            /* 02 */ /node_modules\/(@polkadot\/(extension|keyring|networks|react|ui|util|vanitygen|x-)|@acala-network|@edgeware|@laminar|@ledgerhq|@open-web3|@sora-substrate|@subsocial|@zondax|edgeware)/
          ]),
          ...mapChunks('react', [
            /* 00 */ /node_modules\/(@fortawesome)/,
@ -167,14 +165,14 @@ function createWebpack (ENV, context) {
          ...mapChunks('other', [
            /* 00 */ /node_modules\/(@babel|ansi-styles|asn1|browserify|buffer|history|html-parse|inherit|lodash|memoizee|object|path-|parse-asn1|pbkdf2|process|public-encrypt|query-string|readable-stream|regenerator-runtime|repeat|rtcpeerconnection-shim|safe-buffer|stream-browserify|store|tslib|unified|unist-util|util|vfile|vm-browserify|webrtc-adapter|whatwg-fetch)/,
            /* 01 */ /node_modules\/(attr|brorand|camelcase|core|chalk|color|create|cuint|decode-uri|deep-equal|define-properties|detect-browser|es|event|evp|ext|function-bind|has-symbols|ieee754|ip|is|lru|markdown|minimalistic-|moment|next-tick|node-libs-browser|random|regexp|resolve|rxjs|scheduler|sdp|setimmediate|timers-browserify|trough)/,
-            /* 03 */ /node_modules\/(base-x|base64-js|blakejs|bip|bn\.js|cipher-base|crypto|des\.js|diffie-hellman|elliptic|hash|hmac|js-sha3|md5|miller-rabin|ripemd160|secp256k1|sha\.js|xxhashjs)/
+            /* 03 */ /node_modules\/(base-x|base64-js|blakejs|bip|bn\.js|cipher-base|crypto|des\.js|diffie-hellman|elliptic|hash|hmac|js-sha3|md5|miller-rabin|ripemd160|secp256k1|scryptsy|sha\.js|xxhashjs)/
          ])
        }
      }
    },
    output: {
      chunkFilename: '[name].[chunkhash:8].js',
-      filename: '[name].[hash:8].js',
+      filename: '[name].[contenthash:8].js',
      globalObject: '(typeof self !== \'undefined\' ? self : this)',
      path: path.join(context, 'build'),
      publicPath: ''
@ -183,6 +181,10 @@ function createWebpack (ENV, context) {
      hints: false
    },
    plugins: plugins.concat([
+      new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+        process: 'process/browser.js'
+      }),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new webpack.DefinePlugin({
        'process.env': {
@ -197,12 +199,19 @@ function createWebpack (ENV, context) {
      })
    ]).filter((plugin) => plugin),
    resolve: {
-      alias,
-      extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx']
+      alias: {
+        ...alias,
+        'react/jsx-runtime': require.resolve('react/jsx-runtime')
+      },
+      extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx'],
+      fallback: {
+        crypto: require.resolve('crypto-browserify'),
+        path: require.resolve('path-browserify'),
+        stream: require.resolve('stream-browserify')
+      }
    },
-    watch: !isProd,
    watchOptions: {
-      ignored: ['.yarn', /build/, /node_modules/]
+      ignored: ['.yarn', 'build', 'node_modules']
    }
  };
 }
--- a/yarn.lock
+++ b/yarn.lock