升级webpack5后react-dev-utils@next缺失工具及TS项目配置求助

缺失组件的替代方案 #

• WatchMissingNodeModulesPlugin：该插件的作用是监听项目中已引用但未安装的依赖，安装后自动重启dev server。webpack5已经内置了该能力，直接删除配置中该插件的引入和注册逻辑即可。如果需要完全保留原有能力，也可以单独安装独立包watch-missing-node-modules-plugin，使用方法和react-dev-utils导出的版本完全一致。
• typescriptFormatter：该工具仅用于美化TS类型报错的输出格式。新版本react-dev-utils将该组件迁移到了单独路径react-dev-utils/TypeScriptFormatter.js，修改引入路径即可恢复使用；也可以直接移除该工具，使用fork-ts-checker-webpack-plugin自带的报错格式化能力即可满足需求。

TypeScript项目是否需要这两个工具 #

两者都属于开发体验优化工具，非项目必需：

• 不使用WatchMissingNodeModulesPlugin仅会导致你安装完缺失依赖后需要手动重启dev server，不影响任何编译/运行逻辑
• 不使用typescriptFormatter仅会导致TS报错的输出排版原生、可读性稍弱，不会影响类型检查的准确性和编译结果

webpack5 + TypeScript 基础配置模板 #

以下是可直接使用的通用配置，覆盖开发/生产双环境、TS语法支持、常见资源处理、性能优化等基础能力：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

const isDevelopment = process.env.NODE_ENV === 'development';

module.exports = {
  entry: path.resolve(__dirname, 'src/index.tsx'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: isDevelopment ? '[name].js' : '[name].[contenthash].js',
    clean: true,
    publicPath: '/'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024
          }
        },
        generator: {
          filename: 'assets/[name].[hash][ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html')
    }),
    new ForkTsCheckerWebpackPlugin()
  ],
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: !isDevelopment
          }
        }
      }),
      new CssMinimizerPlugin()
    ],
    splitChunks: {
      chunks: 'all'
    }
  },
  devServer: {
    hot: true,
    open: true,
    historyApiFallback: true,
    port: 3000
  },
  mode: isDevelopment ? 'development' : 'production',
  devtool: isDevelopment ? 'eval-cheap-module-source-map' : 'source-map'
};

内容的提问来源于stack exchange，提问作者fawinell