我的第一个React应用程序的记忆仍在我的记忆中。我记得建立一个新项目多么容易。
但是，当我深入前端开发时，我了解到CRA有很多局限性。不要误会我的意思，CRA是我仍然使用的出色工具。但是它缺乏灵活性，让我寻找其他选择。
没有CRA设置反应项目的方法有很多，但是在本文中，我将向您展示如何使用Webpack和Babel设置反应项目
什么是webpack和Babel？
基本上，webpack是一个JavaScript捆绑程序，可将您的静态资产捆绑到一个大文件中。巴别塔是一个将ES6 Javascript转换为JavaScript的旧版本（通常是ES5）的跨编译器，以在所有浏览器上兼容。
即使我不会深入研究上述工具，我还是建议您在继续之前先检阅它们各自的文档。
让我们开始吧！
我是纱线的忠实拥护者，所以这就是我将在本教程中使用的内容。
让我们创建并进入我们的项目文件夹。
Mkdir react-boiler-plate
Cd react-boiler-plate
我们将安装软件包，因此让我们创建一个package.json文件
Yarn init -y
运行此命令将创建一个package.json文件，其中将包含我们应用程序的信息及其所有依赖项。
在安装任何软件包之前，让我们首先放置应用程序的结构。这当然很简单，没有什么复杂的。
react-boiler-plate
public
Src
Package.json
这里我们有两个空文件夹和一个package.json。这个结构会响吗？是的，我们将模仿我们心爱的CRA的结构。
现在，让我们添加一些软件包。我们将从依赖关系开始。
Yarn add react react-dom
这些软件包是唯一需要的依赖项。
让我们安装dev依赖项。我将其分为两部分-webpack软件包和Babel软件包。
Yarn add — dev webpack webpack-cli webpack-dev-server html-webpack-plugin
提示：— dev标志类似于— npm中的save-dev
让我们遍历每个软件包。
第一个软件包是用于打包资产的webpack，webpack-cli将让我们使用webpack cli。记得
yarn start
还是
npm start
在create-react-app中？Webpack-dev-server为我们提供了一个开发服务器。它附带了许多功能，包括热重装，供以后使用。
让我们继续安装Babel。
Yarn add — dev @babel/core @babel/preset-react @babel/preset-env babel-loader style-loader css-loader
因此，我们已经安装了针对反应和环境（浏览器）的Babel预设，用于处理资产导入的样式加载器以及针对.js文件的Babel加载器。
接下来，让我们在根目录中创建两个文件。
touch webpack.config.js .babelrc
我们的项目结构应如下所示
-react-boiler-plate
public
src
.babelrc
webpack.config.js
package.json
在我们的webpack.config.js文件中，添加一些代码。编写webpack配置的方法有很多，这取决于您的偏好。在本文中，我将坚持我的约定。
首先，我们需要两个软件包。一个是节点随附的路径模块，另一个是html-webpack-plugin，即我们安装的软件包。
const path = require(‘path’)
const HTMLplugin = require(‘html-webpack-plugin’)
现在让我们设置规则。这将是一个对象数组。对象是我们要设置的每个规则的对象。在这个项目中，将只有两个规则。您可以根据需要和项目添加任意数量的规则。
这就是为什么我喜欢webpack的众多原因之一-灵活性。
const rules = [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [“style-loader”, “css-loader”]
}
]
第一个对象，我们告诉webpack在项目中的所有.js文件上使用babel-loader，但我们排除了node_modules文件。
在第二个对象中也是如此。我们告诉webpack在.css文件上使用样式加载器。
接下来，让我们导出配置。
module.exports ={
entry: path.join(__dirname, ‘src’ ‘index.js’),
Output: {
filename: ‘bundle.js’,
Path: path.resolve(__dirname, ‘./build’)
},
module: {rules},
plugins: [
new HTMLwebpackplugin({
template: ‘./public/index.html’
})
}
在这里，我们指定我们的输入和输出文件。显然，该入口文件尚未创建。该文件类似于create-react-app中的index.js文件。
输出文件是我们捆绑的应用程序的创建位置。我们将名称指定为bundle.js，并指定要创建的父文件夹。
模块密钥是我们设置规则的地方。我看到许多人把自己的规则放在她的规则上，但是我喜欢将其放在一个常量中，然后在此处调用。它使一切变得更清洁。
既然我们已经做到了，我们就可以做到
module:{rules: rules} or module:{rules} (ES6)
。
最后，plugins键包含我们要使用的所有插件的数组。您可以在项目中使用许多插件。这里是一些清单。
我们的webpack.config.js文件应如下所示：
const path = require(‘path’)
const HTMLplugin = require(‘html-webpack-plugin’)
const rules = [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [“style-loader”, “css-loader”]
}
]
module.exports ={
entry: path.join(__dirname, ‘src’ ‘index.js’),
Output: {
filename: ‘bundle.js’,
Path: path.resolve(__dirname, ‘./build’)
},
module: {rules},
plugins: [
new HTMLwebpackplugin({
template: ‘./public/index.html’
})
]
}
在忘记之前，让我们创建上面指定的文件。公用文件夹中的index.html和src文件夹中的index.js文件。
我们的项目结构应如下所示：
— react-boiler-plate
public
index.html
src
index.js
.babelrc
webpack.config.js
package.json
接下来，让我们配置babel。在我们的.babelrc文件中，添加我们之前安装的预设。该文件的内容应为JSON格式。
“presets”[“@babel/preset-env”,”@babel/preset-react”]
我们已经完成了我们的React项目的建立-好吧，其中的90％。在我们的index.html文件中，让我们添加一个简单的html样板。如果使用的是vscode，请键入感叹号，然后按Enter。这将自动为您生成一个HTML文档。然后添加一个ID为root的空div并保存。
我们的index.html应该看起来像这样
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>React boilerplate</title>
</head>
<body>
<div id=’root’></div>
</body>
</html>
接下来，我们转到SRC文件夹中的index.js文件。首先，我们需要
导入React和ReactDom。之后，让我们创建一个常量，该常量将存储我们在index.html文件中创建的div。
我们的文件应如下所示：
import React from ‘react’
import ReactDom from ‘react-dom’
const root = document.getElementById(‘root’)
在index.js文件中，我们创建一个名为app的功能组件并包装。
现在我们的index.js应该看起来像这样：
import React from ‘react’
import ReactDom from ‘react-dom’
const root = document.getElementById(‘root’)
const App = () => {
return (
<h1>Hello from React</h1>
)
}
ReactDom.render(<App />, root)
瞧！我们的React项目已完成-大多数。
还记得我们是如何用来启动开发服务器并在创建反应项目中构建应用的吗？
yarn start
yarn build
webpack-dev-server是一个了不起的工具，让我们可以做到这一点。我们可以创建脚本，自定义服务器的运行方式，还提供热重载。您可以在此处查看官方文档，
因此让我们转到package.json设置脚本。由于我们不会进行任何测试和弹出，因此我们只需要为该项目使用两个脚本-开始启动开发服务器并进行编译以编译我们的应用程序。
在package.json文件中，添加带有对象值的新键，脚本。在对象内部，添加以下代码。
“start”: “webpack-dev-server — mode development — open — hot”,
“build”: “webpack — mode production”
我们在package.json文件中添加的内容应如下所示：
“scripts”: {
“start”: “webpack-dev-server — mode development — open — hot”,
“build”: “webpack — mode production”
}
保存并退出。
瞧！
我们的React项目现已完成。
yarn start
将启动开发服务器。如果一切正常，我们应该在浏览器中看到“您反应良好”。
我知道那是很长的，也许太长了。您可以将其用作所有React项目的样板。您还可以自定义它并添加更多功能和规则。
如果您是Webpack的新手，我建议您进一步了解它。这是一个方便的工具，如果没有它，您将无法生存（至少在我看来）。
整个项目都可以在我的github仓库中找到。
