在 React 和 TypeScript 中使用 Webpack 5：2021 年 8 月 19 日更新指南

2023-12-29 20:44:28

webpack 5 现已发布，带来了众多激动人心的新功能和改进。如果您使用 React 和 TypeScript 构建应用程序，那么升级到 webpack 5 非常重要。

前言

截止到 2021 年 8 月 19 日，webpack 的最新版本是 5.5，相对来说比较稳定。但是，React 的相关脚手架工具 create-react-app 最近一次更新是在 14 天前。这意味着如果您想要在 React 和 TypeScript 中使用 webpack 5，您需要手动升级您的项目。

本指南将引导您完成在基于 React 和 TypeScript 的应用程序中升级到 webpack 5 的过程。

步骤 1：安装 webpack 5

首先，您需要安装 webpack 5。您可以通过运行以下命令来做到这一点：

npm install webpack webpack-cli --save-dev

步骤 2：升级您的 webpack 配置

接下来，您需要升级您的 webpack 配置。webpack 5 引入了一些新的配置选项，因此您需要确保您的配置是最新的。

您可以通过在项目目录中创建一个新的 webpack.config.js 文件来做到这一点。该文件应如下所示：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  devServer: {
    contentBase: './dist',
  },
};