学习 React - 第 1 部分 - 使用 Webpack 4 (+ CSS / SASS) 简单设置 React 应用程序

2025-06-08

学习 React - 第 1 部分 - 使用 Webpack 4 (+ CSS / SASS) 简单设置 React 应用程序

最初发表在我的博客中

大家好，最近怎么样？这篇文章我会教大家如何快速轻松地在 React 应用中使用 Webpack 4。

我假设您已经安装了node和npm常见的程序。

首先，让我们创建项目，运行命令npm init -y：

mkdir webpack-4-react
cd webpack-4-react/
npm init -y

-y 标志只是为了让您不必在初始化项目时对所有 npm 问题一直按“是”。

Wepback的安装

现在，让我们安装 Webpack，以便可以在项目中使用它。我一直在使用yarn，但 npm 也同样好用。总结一下，如果您使用的是 npm，只需将所有调用更改为yarn add xfor npm i x，当需要作为开发依赖项安装时，请切换为yarn add x -Dfor npm i x -D。

继续，让我们将 Webpack 添加为项目中的一个开发依赖项：

yarn add webpack webpack-cli webpack-dev-server -D

这将安装 Webpack 开发包以及 Webpack 的开发服务器，我们可以使用它在本地运行和测试我们的应用程序。这还会更新我们的package.json文件，将这些包添加为开发依赖项。

创建我们的文件

现在，让我们创建一个基本的 HTML 文件，并使用一个指向该main.js文件的 script 标签。该index.html文件将位于dist文件夹中，该文件也将位于main.js文件夹中，Webpack 将创建该文件（因此无需手动创建）。这个 JavaScript 文件将包含我们的 React 应用程序代码，并将由 Webpack 生成。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>React and Webpack4</title>
    </head>
    <body>
        <section id="index"></section>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

现在，我们应该创建一个src文件夹，并在其中创建一个index.js文件，它将作为我们 React 应用程序的起点。它的结构将是最简单的 React 代码。

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

const Index = () => {
  return <div>Hello React!</div>;
};

ReactDOM.render(<Index />, document.getElementById("index"));

现在，为了使其正常工作，我们需要将初始化脚本添加到我们的package.json文件中。这些脚本将使 Webpack 发挥其魔力，根据我们稍后定义的配置转换我们的代码。第一个脚本是这样的：

"start": "webpack-dev-server --mode development --open",

您将使用此脚本进行本地开发。它将用于webpack-dev-server在本地提供您的文件，并生成main.js我们在上面几行 HTML 文件中链接的文件。--open最后的标志将使 Webpack 在服务于您应用程序的本地地址中打开您的默认浏览器。另一个脚本是：

"build": "webpack --mode production"

使用此脚本，Webpack 开发服务器将不会运行，但 Webpack 将生成可供生产的应用程序文件，其中包含所有最小化的代码和一些额外的内容。

在键值中添加这两个脚本scripts。你的package.json文件现在应该如下所示：

{
  "name": "webpack-4-react-boilerplate",
  "version": "1.0.0",
  "author": "",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

Webpack 配置

好了，现在，如果你尝试使用yarn run start或运行这些命令yarn run build，它们将无法正常工作。这是因为，为了让 Webpack 理解我们创建的 React 代码，我们需要一些工具来进行转译，即将我们编写的 React 代码转换为任何浏览器都能理解的代码。让我们开始吧。首先，让我们安装必要的 React 包React和React DOM。

yarn add react react-dom

然后，我们需要安装 Babel 和一些加载器来转译代码。这些加载器应作为开发依赖项安装：

yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react -D

完成这些安装后，您的package.json文件应该看起来像这样：

{
  "name": "webpack-4-react-boilerplate",
  "version": "1.0.0",
  "author": "",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5"
    "css-loader": "^1.0.1",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  }
}

现在，我们需要创建一个 Webpack 配置文件webpack.config.js。在我之前关于 Webpack 的文章中，我已经讨论过它，所以这篇文章我会更简短一些。你的文件应该如下所示：

module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "main.js"
  },
  devServer: {
    contentBase: "./dist"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

这是最简单的 Webpack 配置文件。简单解释一下：在 中entry，我们定义了应用程序的入口文件；在 中，output我们包含了 Webpack 将生成的 JavaScript 文件的定义；在 中，devServer我们定义了开发服务器将用于提供文件的文件夹；在 中，module我们定义了应用程序的通用规则，例如，在本例中，我们将使用什么来转译每种类型的文件。

除了 Webpack 配置文件之外，由于我们定义了babel-loader要转译.js文件，我们还需要创建 Babel 配置文件，该文件将指示 Babel 应该使用哪些 loader 来转译我们的代码。此文件以及 Webpack 配置文件应该位于项目的根目录中，并命名为.babelrc。它也是一个非常简单的文件，如下所示：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

现在，我们可以运行命令在本地启动开发服务器：

yarn run start

如果一切顺利，您将看到浏览器打开，并在屏幕上显示带有Hello React消息的 React 组件。如果您--open从初始化脚本中移除了该标志，则可以访问 的默认地址webpack-dev-server，即http://localhost:8080/

添加 CSS

要添加 CSS，我们还需要做更多工作。为了转换 CSS 文件并在我们的 React 应用程序中使用它们，我们需要一些加载器。既然我们要添加 CSS，那就利用SASS为样式文件添加一些附加功能吧。首先，让我们安装一些软件包：css-loader、，style-loader以及sass-loader最后的node-sass。所有这些都应该作为开发依赖项安装：

yarn add css-loader style-loader sass-loader node-sass -D

现在，我们在 webpack 配置文件中添加另一个条目。该条目将告诉 webpack 如何处理.scss符合 SASS 标准的文件格式。你的webpack.config.js文件现在应该如下所示：

module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "main.js"
  },
  devServer: {
    contentBase: "./dist"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      }
    ]
  }
};

现在，您应该创建主样式文件。在 中src，您可以创建styles文件夹，以便更好地组织样式文件。从主样式文件中，您将能够导入其他特定文件。因此，让我们创建该/src/styles/main.scss文件：

p {
    background-color: teal;
}

现在，在你的主 React 文件中，你需要做的就是使用 导入 SCSS 文件import "./styles/main.scss";。你的index.js代码现在会像这样：

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

import "./styles/main.scss";

const Index = () => {
  return (
    <div>
      <p>Hello React!</p>
    </div>
  );
};

ReactDOM.render(<Index />, document.getElementById("index"));

现在您可以看到您的Hello React消息具有不同的背景颜色。

正如我提到的，你可以在主文件中导入其他样式文件。我喜欢为每个组件创建单独的样式文件。例如，我可以创建一个components文件夹。在该文件夹中，我将创建一个_Component.scss。然后，让我们创建该/src/styles/components/_Component.scss文件并在其中包含一些基本的 CSS：

p {
    color: white;
}

现在，在main.scss文件上，您需要做的就是导入它，就像这样：

@import "components/Component";

p {
    background-color: teal;
}

现在，当你的浏览器刷新时，你会注意到包含“Hello React”消息的段落现在变成了白色字体。导入.scss此类文件的主要要求是，要导入的文件名称必须以 开头_。

就这样，我们得到了一个尽可能简单但相当完整的项目，其中包含 React、Webpack 4 和 SASS。

如果您想查看最终代码，可以点击此处访问 Github 仓库。您可以随意克隆它，将其用作样板，等等。

希望以上 React 设置对您有所帮助。如有任何疑问，请在评论区留言。

干杯!

鏂囩珷鏉ユ簮锛�https://dev.to/felipegalvao/simple-setup-for-a-react-application-with-webpack-4--css--sass-bef
Devto 翻译
PREV
构建带有嵌套下拉菜单的纯 CSS 菜单
NEXT
基础设施即代码：初学者的视角 Terraform 结论 资源