feat: dev server 升级至 webpack5

src/utils/custom-config.js

@@ -1,5 +1,5 @@
 const fs = require('fs')
-const mergeWebpackConfig = require('webpack-merge')
+const { merge: mergeWebpackConfig } = require('webpack-merge')
 const { getProjectFilePath } = require('./path')
 
 let customConfig = null
@@ -11,12 +11,12 @@ const getCustomConfig = () => {
     return customConfig
   }
 
-  const llsConfig = getProjectFilePath('lark.config.js')
+  const larkConfig = getProjectFilePath('lark.config.js')
   try {
     // eslint-disable-next-line no-bitwise
-    fs.accessSync(llsConfig, fs.constants.F_OK | fs.constants.R_OK)
+    fs.accessSync(larkConfig, fs.constants.F_OK | fs.constants.R_OK)
     // eslint-disable-next-line
-    customConfig = { ...defaultConfig, ...require(llsConfig) }
+    customConfig = { ...defaultConfig, ...require(larkConfig) }
   } catch (e) {
     if (e.code === 'ENOENT') {
       // 文件不存在，使用默认配置

src/webpack/webpack.config.build.js

@@ -5,7 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const safePostCssParser = require('postcss-safe-parser')
 const { SourceMapDevToolPlugin } = require('webpack')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
 const StyleExtHtmlWebpackPlugin = require('../webpack-plugins/style-ext-html-webpack-plugin')
 const { appSrc, appBuild } = require('../variables/paths')

src/webpack/webpack.config.dev.js

@@ -1,19 +1,18 @@
 const path = require('path')
 const webpack = require('webpack')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
+const ignoredFiles = require('react-dev-utils/ignoredFiles')
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware')
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware')
-const ignoredFiles = require('react-dev-utils/ignoredFiles')
 const { appPublic, appSrc } = require('../variables/paths')
+const { PUBLIC_PATH } = require('../variables/variables')
 const configFactory = require('./webpack.config')
 const { processWebpackConfig } = require('../utils/custom-config')
 
 module.exports = () =>
   processWebpackConfig(
     merge(
       configFactory({
-        entry: ['react-dev-utils/webpackHotDevClient'],
         plugins: [
           new webpack.HotModuleReplacementPlugin(),
           new CaseSensitivePathsPlugin()
@@ -32,36 +31,54 @@ module.exports = () =>
             path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
         },
         devServer: {
-          disableHostCheck: true,
+          client: {
+            overlay: true
+          },
+          allowedHosts: 'all',
           // Enable gzip compression of generated files
           compress: true,
           // Silence WebpackDevServer's own logs since they're generally not useful.
           // It will still show compile warnings and errors with this setting.
-          clientLogLevel: 'none',
-          contentBase: appPublic,
-          // By default files from `contentBase` will not trigger a page reload.
-          watchContentBase: true,
-          // Enable hot reloading server. It will provide /sockjs-node/ endpoint
-          // for the WebpackDevServer client so it can learn when the files were
-          // updated. The WebpackDevServer client is included as an entry point
-          // in the Webpack development configuration. Note that only changes
-          // to CSS are currently hot reloaded. JS changes will refresh the browser.
-          hot: true,
-          publicPath: '/',
-          quiet: true,
-          watchOptions: {
-            ignored: ignoredFiles(appSrc)
+          static: {
+            // By default WebpackDevServer serves physical files from current directory
+            // in addition to all the virtual build products that it serves from memory.
+            // This is confusing because those files won’t automatically be available in
+            // production build folder unless we copy them. However, copying the whole
+            // project directory is dangerous because we may expose sensitive files.
+            // Instead, we establish a convention that only files in `public` directory
+            // get served. Our build script will copy `public` into the `build` folder.
+            // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+            // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+            // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+            // Note that we only recommend to use `public` folder as an escape hatch
+            // for files like `favicon.ico`, `manifest.json`, and libraries that are
+            // for some reason broken when imported through webpack. If you just want to
+            // use an image, put it in `src` and `import` it from JavaScript instead.
+            directory: appPublic,
+            publicPath: [PUBLIC_PATH],
+            // By default files from `contentBase` will not trigger a page reload.
+            watch: {
+              // Reportedly, this avoids CPU overload on some systems.
+              // https://github.com/facebook/create-react-app/issues/293
+              // src/node_modules is not ignored to support absolute imports
+              // https://github.com/facebook/create-react-app/issues/1065
+              ignored: ignoredFiles(appSrc)
+            }
+          },
+          devMiddleware: {
+            // It is important to tell WebpackDevServer to use the same "publicPath" path as
+            // we specified in the webpack config. When homepage is '.', default to serving
+            // from the root.
+            // remove last slash so user can land on `/test` instead of `/test/`
+            publicPath: PUBLIC_PATH.slice(0, -1)
           },
           host: '0.0.0.0',
-          overlay: false,
           historyApiFallback: {
-            disableDotRule: true
+            disableDotRule: true,
+            index: PUBLIC_PATH
           },
-          before(app, server) {
-            // This lets us fetch source contents from webpack for the error overlay
-            app.use(evalSourceMapMiddleware(server))
-            // This lets us open files from the runtime error overlay.
-            app.use(errorOverlayMiddleware())
+          onBeforeSetupMiddleware(devServer) {
+            devServer.app.use(evalSourceMapMiddleware(devServer))
           }
         }
       }

src/webpack/webpack.config.js

@@ -211,6 +211,9 @@ module.exports = ({ entry = [], plugins = [] }) => {
         )
       }
     },
+    stats: {
+      errorDetails: true
+    },
     plugins: [
       new HtmlWebpackPlugin({
         template: appHtml,