Webpack: 搭建 React 全栈开发环境

原创

于 2024-06-26 03:00:00 发布 · 1.3k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端

概述

传统 Web 开发强调样式、结构、逻辑分离，以此降低技术复杂度。但 React 认为渲染逻辑本质上与其它 UI 逻辑存在内在耦合关系，所以提倡将结构、逻辑与样式共同存放在同一文件中，以“组件”这种松散耦合结构实现关注点分离，并为此设计实现了一套 JavaScript-XML(JSX) 技术，以支持在 JavaScript 中编写 Template 代码，如：
```
import React from 'react';

const Component = () => {
  return <div className="hello">hello world</div>
}
```
为支持这一特性，我们需要搭建一套使用的工程化环境，将 JSX 及 React 组件转换为能够在浏览器上运行的 JavaScript 代码。本文将递进介绍使用 Webpack 搭建 React 应用开发环境的主要方法，包括：
- 使用 Babel 处理JSX文件
- 使用 html-webpack-plugin、webpack-dev-server 运行 React 应用
- 在 React 中复用 TypeScript、Less 等编译工具
- 搭建 React SSR 环境
- 使用 Create React App

使用 Babel 加载 JSX 文件

绝大多数情况下，我们都会使用 JSX 方式编写 React 组件，但问题在于浏览器并不支持这种代码，为此我们首先需要借助构建工具将 JSX 等价转化为标准 JavaScript 代码。
在 Webpack 中可以借助 babel-loader，并使用 React 预设规则集 @babel/preset-react ，完成 JSX 到 JavaScript 的转换，具体步骤：
安装依赖：$ yarn add -D webpack webpack-cli babel-loader @babel/core @babel/preset-react

修改 Webpack 配置，加入 babel-loader 相关声明：

module.exports = {
     
     
  mode: 'none',
  module: {
     
     
    rules: [
      {
     
     
        test: /\.jsx$/,
        loader: "babel-loader",
        options: {
     
     
          presets: ["@babel/preset-react"],
        }
      },
    ],
  },
};

执行构建命令，如 npx webpack 经过 babel-loader 处理后，JSX 将被编译为 JavaScript 格式的 React.createElement 函数调用，如：

此外，JSX 支持新旧两种转换模式，一是上图这种 React.createElement 函数，这种模式要求我们在代码中引入 React，如上图的 import React from "react"；二是自动帮我们注入运行时代码，此时需要设置 runtime:automatic，如：
```
{
  test: /\.jsx$/,
  loader: 'babel-loader',
  options: {
    "presets": [
      ["@babel/preset-react", {
        "runtime": "automatic"
      }]
    ]
  }
}
```