chore(deps-dev): migrate webpack-dev-server from v3 to v4

webpack-cli@4 requires webpack-dev-server@4:
https://github.com/webpack/webpack-dev-server/releases/tag/v4.0.0-beta.0

* Migrate config from v3 to v4:
https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

* Invoke webpack-dev-server using `webpack serve` instead:
"Error: Cannot find module 'webpack-cli/bin/config-yargs' when use v5"
webpack/webpack-dev-server#2424

* Pass production/development env with `--node-env` or nothing instead:
https://github.com/webpack/webpack-cli/blob/master/CHANGELOG.md#450-2021-02-02
    * `cross-env` is no longer needed
    * Webpack sets production/development env to 'production' by default
      https://v4.webpack.js.org/configuration/mode/

package.json

@@ -20,6 +20,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.8.7",
     "@babel/preset-react": "^7.8.3",
+    "@webpack-cli/serve": "^1.5.2",
     "babel-loader": "^8.0.6",
     "cross-env": "^7.0.2",
     "css-loader": "^3.4.2",
@@ -38,7 +39,7 @@
     "webpack": "^4.42.0",
     "webpack-cdn-plugin": "^3.2.2",
     "webpack-cli": "^4.9.0",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^4.6.0"
   },
   "lint-staged": {
     "*.json": [
@@ -98,8 +99,8 @@
   "scripts": {
     "clean": "rimraf dist/assets dist/index.html",
     "prebuild": "npm run clean",
-    "build": "cross-env webpack",
+    "build": "webpack",
     "prestart": "npm run clean",
-    "start": "cross-env NODE_ENV=development webpack-dev-server"
+    "start": "webpack serve --node-env=development"
   }
 }

webpack.config.js

@@ -121,7 +121,12 @@ module.exports = {
     new HtmlWebpackHarddiskPlugin()
   ]),
   devServer: {
-    contentBase: path.join(__dirname, './dist'),
+    static: {
+      directory: path.resolve(__dirname, 'dist'),
+    },
+    devMiddleware: {
+      publicPath: '/assets',
+    },
     proxy: {
       '/bbs': {
         target: 'https://ws.ptt.cc',