前端工程化：利用 webpack 5 从零搭建完整的 React 18 + TS 开发和打包环境

2023-11-04 11:49:12

序言：拥抱前端工程化的时代

随着前端技术的飞速发展，前端工程化已成为构建现代化、高性能 Web 应用程序的关键。webpack 作为最流行的打包工具之一，以其模块化、可扩展性和强大的功能而备受推崇。在这篇文章中，我们将深入探讨如何使用 webpack 5 从零构建一个完整的 React 18 + TS 开发和打包环境，为您的前端开发项目奠定坚实的基础。

安装和配置 webpack 5

首先，让我们安装 webpack 5 的 CLI 工具和必要的依赖项：

npm install -g webpack-cli webpack webpack-dev-server
npm install --save-dev typescript ts-loader @babel/core @babel/preset-typescript @babel/preset-react

接下来，创建一个名为 webpack.config.js 的配置文件，并添加以下内容：

const path = require('path');

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

使用 TypeScript 和 React 18

在 src 文件夹中创建 index.tsx 文件，作为应用程序的入口点：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, webpack 5!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

模块热替换：开发体验的提升

为了实现模块热替换，我们将在 webpack.config.js 中添加以下配置：

devServer: {
  ...
  hot: true,
}

构建优化：速度和效率

接下来，我们优化构建过程以提高速度和效率：

代码拆分： 使用 webpack 的代码拆分功能将应用程序拆分成更小的块，从而缩短初始加载时间。
缓存： 启用缓存机制，在后续构建中重用以前编译过的模块，从而加速构建过程。
生产模式： 在生产环境中使用 webpack 的生产模式，对代码进行缩小、混淆和其他优化。

完整的 webpack.config.js 配置

整合上述优化后，最终的 webpack.config.js 配置如下：

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devServer: {
    contentBase: './dist',
    port: 3000,
    hot: true,
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    cache: true,
  },
  mode: 'production',
};