Swap to webpack-dev-server (#4232)

* Swap to webpack-dev-server

* Copy optional

* sui imports

package.json

@@ -28,19 +28,19 @@
   "scripts": {
     "analyze": "yarn clean && BUILD_ANALYZE=1 yarn run build:code && yarn source-map-explorer packages/apps/build/main.*.js",
     "build": "yarn run build:i18n && yarn run build:code",
-    "build:code": "NODE_ENV=production node_modules/@polkadot/dev/scripts/polkadot-dev-build-ts.cjs",
+    "build:code": "yarn polkadot-dev-build-ts",
     "build:i18n": "i18next-scanner --config i18next-scanner.config.js && node ./scripts/i18nSort.js",
     "build:release:electron": "yarn build && yarn build:electron && yarn postinstall:electron",
     "build:release:ipfs": "node scripts/ipfsUpload.js",
     "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 --mode production",
+    "build:www": "rm -rf packages/apps/build && mkdir -p packages/apps/build && yarn run build:i18n && cd packages/apps && yarn webpack --config webpack.config.js --mode production",
     "build:electron": "yarn clean:electronBuild && yarn build:electronMain && yarn build:electronRenderer",
-    "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",
+    "build:devElectronRenderer": "cd packages/apps-electron && yarn webpack --config webpack.renderer.js --mode development",
+    "build:electronRenderer": "cd packages/apps-electron && yarn webpack --config webpack.renderer.js --mode production",
+    "build:devElectronMain": "cd packages/apps-electron && yarn webpack --config webpack.main.js --mode development",
+    "build:electronMain": "cd packages/apps-electron && yarn webpack --config webpack.main.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",
@@ -58,7 +58,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 && yarn webpack --config webpack.config.js --mode development --watch",
+    "start": "yarn clean && cd packages/apps && yarn webpack --config webpack.serve.js --mode development --watch serve --port 3000",
     "start:electron": "yarn clean:electronBuild && concurrently 'yarn build:devElectronMain && cd packages/apps-electron && electron ./build/electron.js' 'yarn build:devElectronRenderer'"
   },
   "devDependencies": {

packages/apps-electron/webpack.renderer.js

@@ -8,13 +8,12 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const { merge } = require('webpack-merge');
 
-const baseConfig = require('../apps/webpack.base.config');
+const baseConfig = require('../apps/webpack.base.js');
 
-const ENV = process.env.NODE_ENV || 'production';
 const context = __dirname;
 
 module.exports = merge(
-  baseConfig(ENV, context),
+  baseConfig(context),
   {
     plugins: [
       // It must be placed before HtmlWebpackPlugin

packages/apps/package.json

@@ -46,8 +46,7 @@
     "url-loader": "^4.1.1",
     "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"
+    "webpack-dev-server": "^4.0.0-beta.0",
+    "webpack-merge": "^5.7.0"
   }
 }

packages/apps/webpack.base.js

@@ -8,7 +8,6 @@ const path = require('path');
 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');
 
@@ -24,34 +23,20 @@ function mapChunks (name, regs, inc) {
   }), {});
 }
 
-function createWebpack (ENV, context) {
+function createWebpack (context) {
   const pkgJson = require(path.join(context, 'package.json'));
-  const isProd = ENV === 'production';
-  const hasPublic = fs.existsSync(path.join(context, 'public'));
-  const plugins = hasPublic
-    ? [new CopyWebpackPlugin({ patterns: [{ from: 'public' }] })]
-    : [];
-
-  !isProd && plugins.push(
-    new WebpackPluginServe({
-      hmr: false, // switch off, Chrome WASM memory leak
-      liveReload: false, // explict off, overrides hmr
-      port: 3000,
-      progress: false, // since we have hmr off, disable
-      static: path.join(process.cwd(), '/build')
-    })
-  );
-
   const alias = findPackages().reduce((alias, { dir, name }) => {
     alias[name] = path.resolve(context, `../${dir}/src`);
 
     return alias;
   }, {});
+  const plugins = fs.existsSync(path.join(context, 'public'))
+    ? new CopyWebpackPlugin({ patterns: [{ from: 'public' }] })
+    : [];
 
   return {
     context,
     entry: ['@babel/polyfill', './src/index.tsx'],
-    mode: ENV,
     module: {
       rules: [
         {
@@ -161,7 +146,7 @@ function createWebpack (ENV, context) {
     performance: {
       hints: false
     },
-    plugins: plugins.concat([
+    plugins: [
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
         process: 'process/browser.js'
@@ -169,7 +154,7 @@ function createWebpack (ENV, context) {
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       new webpack.DefinePlugin({
         'process.env': {
-          NODE_ENV: JSON.stringify(ENV),
+          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
           VERSION: JSON.stringify(pkgJson.version),
           WS_URL: JSON.stringify(process.env.WS_URL)
         }
@@ -178,7 +163,7 @@ function createWebpack (ENV, context) {
       new MiniCssExtractPlugin({
         filename: '[name].[contenthash:8].css'
       })
-    ]).filter((plugin) => plugin),
+    ].concat(plugins),
     resolve: {
       alias: {
         ...alias,

packages/apps/webpack.config.js

@@ -6,14 +6,13 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const { merge } = require('webpack-merge');
 
-const baseConfig = require('./webpack.base.config');
+const baseConfig = require('./webpack.base.js');
 
-const ENV = process.env.NODE_ENV || 'development';
 const context = __dirname;
 const hasPublic = fs.existsSync(path.join(context, 'public'));
 
 module.exports = merge(
-  baseConfig(ENV, context),
+  baseConfig(context),
   {
     devtool: process.env.BUILD_ANALYZE ? 'source-map' : false,
     plugins: [

packages/apps/webpack.serve.js

@@ -0,0 +1,22 @@
+// Copyright 2017-2020 @polkadot/apps authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+const path = require('path');
+const webpack = require('webpack');
+const { merge } = require('webpack-merge');
+
+const baseConfig = require('./webpack.config.js');
+
+module.exports = merge(
+  baseConfig,
+  {
+    devServer: {
+      open: true,
+      static: path.resolve(__dirname, 'build')
+    },
+    mode: 'development',
+    plugins: [
+      new webpack.HotModuleReplacementPlugin()
+    ]
+  }
+);