新手入门：使用 webpack 4 从 0 开始搭建 React 项目

目录

• 搭建 React 项目的必要条件
• 安装必要的依赖项
• 创建Webpack配置文件
• 配置开发环境
• 配置生产环境
• 添加必要的 Loader
• 添加必要的 Plugin
• 运行项目
• 常见问题

搭建 React 项目的必要条件

在开始之前，请确保您已经安装了以下软件：

• Node.js (>= 8.0)
• npm (>= 5.0)
• 文本编辑器（如 Visual Studio Code 或 Sublime Text）

安装必要的依赖项

首先，我们需要安装必要的依赖项。您可以使用以下命令安装：

npm install create-react-app

这将安装 create-react-app，这是一个用于创建 React 项目的脚手架工具。

创建 Webpack 配置文件

接下来，我们需要创建一个 Webpack 配置文件。您可以使用以下命令创建：

npx create-react-app my-app

这将创建一个名为 my-app 的新项目目录。在该目录下，您将找到一个名为 webpack.config.js 的文件。此文件包含 Webpack 的默认配置。

配置开发环境

在开发环境中，我们需要告诉 Webpack 如何将我们的源代码编译成可以在浏览器中运行的代码。我们可以通过修改 webpack.config.js 文件来做到这一点。

首先，我们需要添加一个名为 devServer 的属性。该属性用于配置开发服务器。

devServer: {
  contentBase: './public',
  port: 3000,
  open: true
}

• contentBase 属性指定了开发服务器的根目录。
• port 属性指定了开发服务器的端口号。
• open 属性指定了是否在启动开发服务器时自动打开浏览器。

接下来，我们需要添加一个名为 module 的属性。该属性用于配置 Webpack 的模块加载器。

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

• test 属性指定了要匹配的文件类型。
• exclude 属性指定了要排除的文件目录。
• use 属性指定了要使用的 Loader。

在上面的例子中，我们使用 babel-loader 将我们的 JavaScript 代码编译成可以在浏览器中运行的代码。

配置生产环境

在生产环境中，我们需要告诉 Webpack 如何将我们的源代码编译成可以部署到服务器上的代码。我们可以通过修改 webpack.config.js 文件来做到这一点。

首先，我们需要添加一个名为 optimization 的属性。该属性用于配置 Webpack 的优化器。

optimization: {
  minimize: true
}

• minimize 属性指定了是否压缩代码。

接下来，我们需要添加一个名为 output 的属性。该属性用于配置 Webpack 的输出目录。

output: {
  path: path.resolve(__dirname, 'build'),
  filename: 'main.js'
}

• path 属性指定了输出目录的路径。
• filename 属性指定了输出文件的名称。

添加必要的 Loader

Loader 用于将我们的源代码编译成可以在浏览器中运行的代码。我们可以在 webpack.config.js 文件中添加 Loader。

例如，我们可以添加一个名为 style-loader 的 Loader。该 Loader 用于将 CSS 代码编译成可以在浏览器中运行的代码。

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

• test 属性指定了要匹配的文件类型。
• use 属性指定了要使用的 Loader。

在上面的例子中，我们使用 style-loader 和 css-loader 将我们的 CSS 代码编译成可以在浏览器中运行的代码。

添加必要的 Plugin

Plugin 用于扩展 Webpack 的功能。我们可以在 webpack.config.js 文件中添加 Plugin。

例如，我们可以添加一个名为 HtmlWebpackPlugin 的 Plugin。该 Plugin 用于生成 HTML 文件。

plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html'
  })
]

• template 属性指定了 HTML 文件的模板。

在上面的例子中，我们使用 HtmlWebpackPlugin 将我们的 public/index.html 文件作为模板生成 HTML 文件。

运行项目

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

npm start

这将启动开发服务器。您可以在浏览器中访问 http://localhost:3000 来查看项目。

常见问题

• 如何修改 Webpack 的默认配置？

您可以通过修改 webpack.config.js 文件来修改 Webpack 的默认配置。

• 如何添加新的 Loader 或 Plugin？

您可以通过修改 webpack.config.js 文件来添加新的 Loader 或 Plugin。

• 如何生成生产环境代码？

您可以使用以下命令生成生产环境代码：

npm run build

这将生成一个名为 build 的目录。该目录包含了可以部署到服务器上的代码。