Webpack 学习之旅 (四)：突破束缚，用 webpack 与 React 携手共进

2023-12-04 05:30:59

Webpack学习之旅（四）：用Webpack 5 与 React 携手共进

1. webpack 与 React 的优势

Webpack 是一个模块加载器和打包工具，而 React 是一个 JavaScript 库，用于构建用户界面。这两个工具的结合，为前端开发人员带来了许多优势：

模块化开发: webpack 可以将项目拆分成多个模块，每个模块都负责一个特定的功能，这样可以使项目更加容易维护和重用。
代码压缩和优化: webpack 可以对代码进行压缩和优化，减少文件大小，提高页面加载速度。
代码热更新: webpack 可以支持代码热更新，当代码发生变化时，它可以只更新发生变化的代码，而不会影响其他代码，这样可以提高开发效率。
可扩展性: webpack 是一个高度可扩展的工具，它可以通过插件来扩展其功能，这使得它可以满足各种不同的开发需求。

2. 使用 Webpack 5 创建 React 项目

安装 webpack 和 React

npm install -g webpack webpack-cli react react-dom

创建一个新的项目

mkdir my-react-project
cd my-react-project

初始化项目

npm init -y

安装必要的依赖项

npm install --save-dev webpack webpack-dev-server webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

创建 webpack 配置文件

touch webpack.config.js

在 webpack 配置文件中添加以下代码:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["babel-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

创建 src 目录和 index.js 文件

mkdir src
touch src/index.js

在 index.js 文件中添加以下代码:

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

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

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

运行 webpack

webpack

在项目根目录下创建 package.json 文件，并添加以下代码:

{
  "name": "my-react-project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3",
    "babel-loader": "^8.2.5",
    "@babel/core": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "style-loader": "^3.0.0",
    "css-loader": "^6.7.1"
  }
}