初学者使用 webpack 设置 React

搭建 React 项目的方法有很多，你可能听说过 create-react-app 和 webpack 这两个比较流行的工具。今天我们就来学习如何用 webpack 和 babel 简单搭建 React 项目。

那么什么是 Webpack？

定义说 Webpack 是现代 JavaScript 应用程序的静态模块捆绑器，这是什么意思呢？

Webpack 是一个捆绑器，它捆绑所有 javascript 文件，并在内部创建一个依赖关系图，负责映射所有模块，并根据该图创建一个可以插入 HTML 文件的 bundle.js 文件。

因此，在本文中，我想向您展示如何使用 webpack 设置您的第一个 React 应用程序，这将是一个非常简单的设置，之后，您将能够根据需要扩展功能。

1.初始阶段（文件夹设置）

首先，我们将创建一个 Project 文件夹，然后在其中创建一个public 文件夹和一个src文件夹。public 文件夹将用于服务应用程序，而这个文件夹将包含发布应用程序所需的所有内容。src 文件夹中包含所有 JavaScript 文件，而 src 文件夹将被打包成一个 JavaScript 文件，并自动放置在 public 文件夹中。

mkdir webpack-react
cd webpack-react
mkdir public src

接下来，我们将在公共文件夹中创建一个 index.html 文件，其中包含以下内容。

cd public
touch index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React with webpack</title>
</head>
<body>
    <div>
        <h1>Hello Webpack</h1>
    </div>
    <script src="./bundle.js"></script>
</body>
</html>

2. 设置 Webpack

在开始安装 webpack 和其他 npm 包之前，我们需要先设置 package.json 文件。设置 package.json 文件很简单，您可以手动运行npm init这个脚本，也可以自己填写所有详细信息，或者让 npm 处理，只需在文件末尾添加 -y 即可npm init -y。这将在根文件夹中创建 package.json 文件。
我们先安装一些包，然后我会逐一解释。

npm i webpack webpack-cli webpack-dev-server --save-dev

我们需要webpack将所有 JavaScript 代码捆绑在一起并构建我们的应用程序。
webpack-dev-server需要在本地 Web 服务器中为应用程序提供开发目的。
webpack-cli为开发人员提供了一组灵活的命令，以提高设置自定义 webpack 项目时的速度。

（注意：添加.gitignore文件以避免node_modules在git中推送）

start现在让我们在package.json中添加一个脚本来运行web-dev-server

...
    "start": "webpack serve --mode development"
...

您可以npm start在命令行上运行该应用程序，在本地服务器上启动它。现在让我们生成bundle.js文件，并看看如何将所有 JavaScript 代码打包到一个文件中。现在我们需要添加一个 webpack 配置，因此我们将在根文件夹中添加webpack.config.js 文件。

touch webpack.config.js

并更新package.jsonstart中的脚本。

...
start: "webpack serve --config ./webpack.config.js --mode development",
...

接下来，让我们在 src 中创建一个 index.js 文件，所有 javascript 代码都将链接到其中。

cd src
touch index.js

并在其中添加一个简单的日志

console.log("Hello World")

现在，我们将在 webpack 配置中添加一个入口点，用于打包。在我们的例子中，它是src/index.js。如果index.js导入了另一个 JavaScript 文件，它也会打包它们。
下一步是添加一个输出文件，即bundle.js，并将该文件链接到public/index.html。第三步是添加一个文件夹，供 webpack 开发服务器使用，以便将我们的应用程序提供给浏览器。内容如下所示。

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.resolve(__dirname, './public'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
  },
};

（注意：路径用于在整个操作系统中正确解析它们）

现在npm start在命令行中运行，您将看到 Hello World 记录在浏览器控制台中。

现在我们将添加 Babel，将现代 JavaScript 特性（ES6 及其他）转译回原生 JavaScript。让我们安装一些 Babel 的软件包。

npm i @babel/core @babel/preset-env babel-loader --save-dev

@babel/preset-env是一个智能预设，允许您使用最新的 JavaScript，而无需微观管理目标环境所需的语法转换（以及可选的浏览器 polyfill）。
加载器告诉 webpack 如何解释和转换文件。转换过程会逐个文件进行，直到文件添加到依赖关系图。

我们需要在webpack.config.js的构建过程中添加 babel 。你的webpack.config.js应该像这样。

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  },
  output: {
    path: path.resolve(__dirname, './public'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
  },
};

（注意：添加了模块，其中我们有规则将测试所有 .js 文件并排除 node_modules，并将使用 babel-loader）

现在让我们添加一个 babel 配置，让我们在根文件夹中创建一个.babelrc文件并在其中添加以下配置。

touch .babelrc

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

3. 使用 webpack 进行 React

到目前为止，我们已经设置了 webpack 和 babel 配置，可以成功打包 JavaScript 代码。但 React 并非完全依赖 JavaScript，因此我们需要支持 React 语法，也就是 .jsx 文件。因此，我们再次需要 babel 来转译代码。为此，我们还需要添加一些依赖项。

npm i @babel/preset-react --save-dev

并将配置添加到./babelrc。

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

现在我们需要在webpack.config.js中添加规则以使 jsx 文件能够转译。

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    path: path.resolve(__dirname, './public'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
  },
};

现在我们可以使用 jsx 代码编写 React。让我们添加 React 包并创建一个组件。

npm i react react-dom --save

在 src 中的组件文件夹内创建一个 Home 组件。

cd src
mkdir components
touch Home.jsx

主页.jsx

import React from 'react';

const Home = () => {
return <div>React Application</div>
}

export default Home

更新src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Home from './components/Home';

ReactDOM.render(
  <Home />,
  document.getElementById('app')
);

最后，让我们更新 index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

现在npm start再次运行，您将能够看到Home组件渲染，这就是如何使用 Webpack 设置 React。虽然这是一个非常基本的设置，但它可以让您了解如何添加更多加载器和插件，并根据您的需求进行设置。我将在接下来的文章中详细介绍高级功能以及如何使其与 Webpack 协同工作。

如果你喜欢，别忘了点个❤️，感谢阅读。祝你编程愉快！！🖥

（注意：我还没有展示如何使用 CSS 和 webpack，我将在以后的文章中解释这些步骤，并且很快会分享一个使用 webpack 进行反应的样板。）

（更新：这篇文章的第二部分现已发布，我在其中解释了如何使用 webpack 设置样式（css 和 sass）。）

文章来源：https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k