使用webpack搭建react项目

初始化目录

BASH
mkdir webpack-react-template && cd webpack-react-template

在使用pnpm初始化package.json

BASH
pnpm init

接下来我们安装一些 react 必要的包

BASH
pnpm i react react-dom
pnpm i webpack webpack-cli -D

XML
.
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── App.tsx
│   └── main.tsx
├── tsconfig.json
└── webpack.config.js

将 ES6 语法降级为 ES5

目前市面上大多使用 babel 来处理的，babel是一个javascript编译器，主要是将 es6 或更新的语法转换成向后兼容的 javascript 版本，以便在低版本的浏览器或环境中运行。

首先我们先安装必要的 npm 包

BASH
pnpm i -D @babel/core @babel/preset-env babel-loader

@babel/core - Babel 的核心包
@babel/preset-env - Babel 的预设包，用于将 ES6 语法降级为 ES5 语法
babel-loader - Webpack 的加载器，用于babel和webpack之间通信

处理`ts`、`tsx`

浏览器是不能直接运行 ts 文件的，于是我们需要将 ts 文件编译成 js 文件，在 webpack 配置中有两种方案，一种是通过 babel 转译，另一种是通过ts-loader转译，下面我将介绍这两种方案的具体配置

使用`babel`

首先，我们需要安装一些必要的 npm 包来处理 TypeScript 和 React JSX 文件。这些包包括：

BASH
pnpm i -D @babel/preset-react @babel/preset-typescript

接下来，在根目录下创建一个.babelrc文件，并添加以下配置：

JSON
{
  "presets": [
		"@babel/preset-env",
		[
			"@babel/preset-react",
			{
				runtime: "automatic"
			}
		]
		"@babel/preset-typescript"
	]
}

现在，我们已经配置好了使用 Babel 来转译 TypeScript 和 React JSX 文件的环境。

使用`ts-loader`

如果选择使用ts-loader来处理 TypeScript 文件，我们需要安装一些必要的 npm 包：

BASH
pnpm i -D ts-loader typescript

接下来，在 webpack 配置文件中，添加以下规则：

JSX
module: {
  rules: [
    {
      test: /\\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/,
    },
  ],
},
resolve: {
  extensions: ['.tsx', '.ts', '.js'],
},

这样，我们就可以使用ts-loader来处理 TypeScript 文件了。

处理 CSS

使用 CSS 模块化

要使用 CSS 模块化，我们需要安装css-loader和style-loader这两个 npm 包：

BASH
pnpm i -D css-loader style-loader

然后，在 webpack 配置文件中，添加以下规则：

JSX
module: {
  rules: [
    {
      test: /\\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
},

这样，我们就可以在 React 组件中引入 CSS 文件，并使用 CSS 模块化的特性了。

使用 Sass

如果我们想要使用 Sass 来编写 CSS，我们需要安装sass-loader和node-sass这两个 npm 包：

BASH
pnpm i -D sass-loader node-sass

然后，在 webpack 配置文件中，添加以下规则：

JSX
module: {
  rules: [
    {
      test: /\\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
    },
  ],
},

这样，我们就可以在 React 组件中引入 Sass 文件，并使用 Sass 来编写样式了。

静态资源

处理图片和字体文件

如果我们想要在项目中使用图片和字体文件，我们需要安装file-loader这个 npm 包：

BASH
pnpm i -D file-loader

然后，在 webpack 配置文件中，添加以下规则：

JSX
module: {
  rules: [
    {
      test: /\\.(png|jpe?g|gif|woff2?|eot|ttf|otf)$/,
      use: ['file-loader'],
    },
  ],
},

这样，我们就可以在 React 组件中引入并使用图片和字体文件了。

处理 SVG 文件

如果我们想要在项目中使用 SVG 文件，我们需要安装url-loader和svgo-loader这两个 npm 包：

BASH
pnpm i -D url-loader svgo-loader

然后，在 webpack 配置文件中，添加以下规则：

JSX
module: {
  rules: [
    {
      test: /\\.svg$/,
      use: [
        'url-loader',
        {
          loader: 'svgo-loader',
          options: {
            plugins: [
              { removeTitle: true },
              { convertColors: { shorthex: false } },
              { convertPathData: false },
            ],
          },
        },
      ],
    },
  ],
},

这样，我们就可以在 React 组件中引入并使用 SVG 文件了。

运行项目

首先，我们需要安装 webpack-dev-server 和 html-webpack-plugin。

BASH
pnpm i webpack-dev-server html-webpack-plugin -D

新建模版文件 src/index.html

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

并在webpack.config.js 中添加以下配置：

JSX
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
  // ...省略其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    port: 3000, // 端口号
    hot: true, // 启用HMR
    open: true // 自动打开默认浏览器
  }
};

接下来，我们可以使用以下命令来运行项目：

BASH
pnpm dev

这将以开发模式启动项目，并自动打开浏览器。

如果需要构建生产版本的项目，可以运行以下命令：

BASH
pnpm build

这将使用生产模式构建项目，并生成优化后的文件用于部署。