从头开始使用 React 和 Babel 设置 Webpack 5

即使对于中级 React 开发者来说，创建自己的 Webpack 配置听起来也令人望而生畏。但解决问题的最佳方法是直面问题！这篇博客将帮助你使用 React 和 Babel 为你的下一个 React 项目设置你自己的基础 Webpack 打包器！它也适合那些想要了解 Webpack 基础知识、Webpack 设置方法以及其底层原理的人。那就让我们开始吧！

TLDR

对于想要直接查看代码的程序员。Github
repo

步骤 1（设置文件夹和下载依赖项）

首先创建一个文件夹，并随意命名。我将它命名为react-webpack。
进入文件并初始化包管理器。-y对于在命令行上提出的所有常规开发问题，都表示“是”。```bash

npm init -y


This is what it will look like.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4413ji1g3rtmpxb2cxmc.jpg)

- Next we will install react dependencies. 
```bash


npm i react react-dom

package.json 文件中的依赖项现在将具有以下内容：```jsx

“依赖项”：{
“react”：“^ 17.0.1”，
“react-dom”：“^ 17.0.1”
}

- Next we will install dev dependencies and loaders
```bash


npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader file-loader css-loader style-loader webpack webpack-cli html-webpack-plugin

package.jsondevDependencies 在jsx中的样子如下：

“ devDependencies ” ： {
“ @ babel /core”：“^7.13.10”，“@babel
/preset-env”：“^7.13.10”，“@babel /preset-react”：“^7.12.13”，“babel-loader”：“^8.2.2”，“css-loader”：“^5.1.3”，“file-loader”：“^6.2.0”，“html-webpack-plugin”：“^5.3.1”，“style-loader”：“^2.0.0”，“webpack”：“^5.27.0”，“webpack-cli”：“^4.5.0”，“webpack-dev-server”：“^3.11.2 ” }



##Step 2 (Setting up Webpack with Babel)

- Next we will create a file called `.babelrc` which will transpile our react code from jsx to regular js. We need to include the following presets :
```jsx


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

到目前为止，我们的代码和文件结构如下所示。

接下来我们将创建 webpack 文件。我们将其命名为webpack.config.js。这个 webpack 文件夹本质上是在 Node 环境中运行，而不是在浏览器中。因此，我们可以在这里编写原生的 JS 代码。

该文件看起来如下：



const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // Where files should be sent once they are bundled
 output: {
   path: path.join(__dirname, '/dist'),
   filename: 'index.bundle.js'
 },
  // webpack 5 comes with devServer which loads in development mode
 devServer: {
   port: 3000,
   watchContentBase: true
 },
  // Rules of how webpack will take our files, complie & bundle them for the browser 
 module: {
   rules: [
     {
       test: /\.(js|jsx)$/,
       exclude: /nodeModules/,
       use: {
         loader: 'babel-loader'
       }
     },
     {
       test: /\.css$/,
       use: ['style-loader', 'css-loader']
     }
   ]
 },
 plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
}

理解 webpack.config.js

我们output提到了文件捆绑后应发送到哪里。
- path提及要创建的目录名称，所有打包文件都将存储在该目录中。我们将文件夹命名为dist，这是常见的做法。
- 这filename是我们为 webpack 运行其魔法（基本上将所有 js 代码捆绑到一个文件中）后创建的新捆绑文件设置的名称。
devServer用于快速开发应用程序，这与生产模式相反，由于它缩小了文件，因此需要花费更多时间来构建应用程序，而这在开发模式下不会发生。
- 我们port可以设置一个我们想要的端口号。我把它设置为 3000。
- watchContentBase当任何文件发生任何更改时，都会触发整个页面重新加载。默认情况下是禁用的。
module是您传递捆绑文件规则的地方。
- test这里我们指定了需要特定加载器加载的文件扩展名。所有.js文件都.jsx需要由 Babel 加载器进行打包。
- exclude是我们提到需要被捆绑程序忽略的文件的地方。
- 文件也是如此。css重要的是要注意，数组use :['style-loader', 'css-loader']需要按照精确的顺序写入。
- 当 webpack 捆绑 css 文件时，它遵循以下顺序：
  - 它首先运行css-loader将 css 文件转换为通用 js 的程序。
  - 然后它运行style-loader并将 css 作为字符串提取到文件中。
最后，我们添加一个plugin名为 HtmlWebpackPlugin 的插件，以确保 webpack 知道运行应用程序时要遵循哪个 html 文件模板。

步骤 3（设置 React 文件夹）

好的，复杂的部分已经完成了！现在让我们构建我们的 React 应用程序文件！😄
创建一个src文件夹并在其中创建 4 个文件。

源码

index.html
index.js
App.js
App.css

索引.html



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Webpack App</title>
</head>

<body>
    <div id="app"></div>
    <script src="index.bundle.js"></script>
</body>

</html>

index.js



import React from "react"
import ReactDom from "react-dom"
import App from "./App"
import "./App.css"

ReactDom.render(<App />, document.getElementById('app'))

App.js

例如，我正在创建一个非常基本的应用程序，但您可以添加更多您喜欢的内容。



import React from "react"

function App() {
    return (<div>
        <h2>Welcome to React App</h2>
        <h3>Date : {new Date().toDateString()}</h3>
    </div>)
}

export default App

应用程序.css



h1{
    color: teal
}

包.json

好的，现在我们必须创建一个脚本来在package.json文件中运行我们的应用程序。添加以下脚本：



"scripts": {
    "serve": "webpack serve --mode development",
    "build": "webpack --mode production"
  }

步骤 4（运行应用程序）

现在只需使用 run 命令通过 CLI 运行它，您就可以看到代码在指定的端口上运行。在我的例子中，它在端口 3000 上运行。这是开发模式下的 bundle 的样子。```bash

npm 运行服务


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0apvkk2jyd7eqoo3blb.jpg)

- You can then do build to see how the dist folder is build in production mode.
```bash


npm run build

-dist 文件夹构建完成后，右键单击index.htmldist 文件夹中的文件，然后点击“在实时服务器中打开”，查看它在生产模式下的样子。这是 bundle 在生产模式下的样子。它已经过压缩。

奖励：优化！

为了优化 React Web 应用，我们将 JS/JSX 文件与 CSS/SASS 文件分离。
之所以这样做，是因为 Webpack 的加载器会style-loader预处理css-loader样式表，并将其嵌入到输出的 JavaScript 包中，而不是 HTML 文件中。
有时，由于这个原因，可能会出现无样式内容 (FOUC) 的闪烁，即在一瞬间，你会看到丑陋的纯 HTML，没有任何样式。为了避免这种糟糕的视觉体验，我们需要拆分文件，并在 HTML 文件中链接 CSS，以便它们同时加载，从而避免 FOUC。

类似的插件MiniCssExtractPlugin可以帮助分离和压缩 CSS 文件，并将其作为链接嵌入到 HTML 文件中，从而避免 FOUC。使用以下命令安装：```bash

npm install --save-dev mini-css-extract-plugin


- Here's how we can add it. First `require` it in your webpack.config.js and replace the MiniCssExtractPlugin loader with `style-loader` and also add it in the plugin.

- It should look something like this (I have highlighted the 3 places where changes are required):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m46j02h1gjmwdiyot948.jpg)

- Finally run build command again and in your `dist` folder you can see your new `main.css` file.
```bash


npm run build

这是最终效果。我添加了一个通用的表单元素，以展示如何使用各自的 CSS 文件构建各种组件，并构建一个类似于 CRA 的 React Web 应用。

致谢

如果你是一位视觉学习者，并且想要视频讲解，可以看看James Bubb的这段精彩视频。我跟着他的YouTube 视频学习并构建了这个 React 入门模板。

文章来源：https://dev.to/riyanegi/setting-up-webpack-5-with-react-and-babel-from-scratch-2021-271l