在 React+TypeScript 项目中构建自定义 Webpack 配置

2023-09-06 06:34:18

自定义 Webpack 配置：优化 React + TypeScript 项目

为什么需要自定义 Webpack 配置？

构建 React + TypeScript 应用程序时，使用脚手架提供的默认配置可能无法满足项目日益增长的复杂性和自定义需求。自定义 Webpack 配置提供了以下优势：

灵活性： 调整构建过程以满足特定项目需求。
定制化： 整合自定义插件、加载器和规则，以定制构建。
性能优化： 微调配置以提高构建速度、减少捆绑文件大小，进而增强应用程序性能。

创建自定义 Webpack 配置

1. 安装 Webpack

npm install webpack webpack-cli --save-dev

2. 创建 webpack.config.js 文件

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
};

3. 配置入口和输出

指定应用程序的入口点和输出目录。

entry: path.resolve(__dirname, 'src/index.tsx'),
output: {
  path: path.resolve(__dirname, 'build'),
  filename: 'bundle.js',
},

4. 加载器和插件

加载器用于转换文件，而插件用于增强构建过程。

module: {
  rules: [
    {
      test: /\.tsx?$/,
      use: 'ts-loader',
    },
  ],
},
plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html',
  }),
],

5. 配置解析器

解析器用于解析模块导入和导出。

resolve: {
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
},

优化 Webpack 配置

1. 代码分割

使用代码分割将大型捆绑文件分解为较小的模块，从而提升加载时间。

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
      },
    },
  },
},