如何从头开始使用 Webpack 和相关工具配置 React

祝你有美好的一天😃！

大家早上好！

我刚刚发现很多人都喜欢我的Vue 和 Webpack 帖子，所以我想也许你们很好奇我们如何使用大家最喜欢的框架和目前排名第一的React（技术上它是一个库）来实现这一点。

统计信息
npm 下载量 - React vs Vue vs Angular
Google 趋势 - React vs Angular vs Vue
npm 依赖包 - React 第 4 名，Vue 第 18 名，Angular 第 48 名
StackOverflow 调查 2019 - 最受欢迎的框架
撰写本文时

那么，让我们开始吧！
操作之前，请先安装 Node.js。
从您的桌面运行此命令。

   mkdir react-webpack && cd react-webpack
   npm init --y 

基本上，这意味着我们正在创建一个名为react-webpack的目录（ md ） ，并将当前目录（cd）桌面更改为react-webpack ，并使用npm init --y命令和默认配置创建一个 package.json 文件。

   npm i -D @babel/cli @babel/core @babel/preset-env @babel/preset-react
   babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin 
   node-sass sass-loader css-loader style-loader

i是install的别名。
-D表示我们将其作为开发依赖项安装。

@babel /cli和@babel /core：这些包让我们可以在命令行中转换我们的 JavaScript 代码，或者我们可以以编程方式转换它。

@babel /preset-env：这个包让我们能够在代码中使用 JavaScript 的最新特性，主要是 ES6 特性以及一些 ES7 和 ES8 特性。如果你想使用async/await特性，你可能需要@babel /polyfill库。

@babel /preset-react：我们需要这个包，以便我们可以在我们的组件中使用JSX
或JavaScript XML语法。

上面两张图片的功能是相同的。JSX的优势在于它比第二张使用JavaScript 的图片更具可读性。在第一个图片中，我们采用声明式的方式，而在第二个图片中，我们采用命令式的方式。正如文档所述，React是一个用于构建UI 的声明式库，而不是命令式库。基本上@babel /preset-react预设的作用是将我们的JSX代码转换为JavaScript。因为浏览器无法理解JSX。

babel-loader：Webpack 需要它来使用 Babel 转换我们的 Javascript 代码。

webpack和webpack-cli：webpack 核心功能和 webpack 命令行实用程序，因此我们可以运行一些自定义的 webpack 命令。

webpack-dev-server：它提供了一个实时开发服务器，每次文件更改时都会重新加载浏览器页面。

html-webpack-plugin：此插件生成一个 HTML 文件，或者我们可以指定一个现有文件来为我们的捆绑包提供服务。

node-sass和sass-loader：我们需要这两个，这样我们才能使用SASS，它们将我们的SASS代码编译为CSS。

css-loader和style-loader：基本上css-loader返回一个字符串，而style-loader获取该字符串并将其放入我们的 html 中的 style 标签内。

   npm i -P react react-dom

-P表示我们将其安装为生产依赖项。

react：用于制作组件的库。react
-dom ：将我们的组件绑定或连接到DOM 的库。

我们的index.html文件。

我们的webpack.config.js文件。

好的，我只是从我的另一篇文章中复制了这个webpack.config.js文件并对其进行了修改。

我不会解释所有这些，只讲重要的部分。我们借助path.join方法和node 提供的全局变量__dirname指定主文件的入口路径。我们使用两个属性指定输出：要创建的文件夹路径和 bundled filename的名称。

在devServer对象中，我们指定端口（本例中为1000），并将open属性设置为 true，以便在启动应用程序时自动打开浏览器；同时，我们将hot属性设置为 true，以便在修改目录中的文件时重新加载页面。historyApiFallback属性指定将访问 index.html 文件，而不是 404响应。

我们的模块对象中的数组规则属性是我们对加载器文件的配置，第一个对象我们指定可以在测试属性中使用扩展名为jsx或js的文件，并且我们指定将在加载器属性中使用babel-loader。在选项对象中，我们首先指定一个预设数组，@babel /preset-env用于新的 JS 功能，@babel /preset-react以便我们可以使用JSX语法。第二个对象我们指定可以在测试属性中使用扩展名为scss或sass的文件，并且在use属性中我们指定将使用的加载器，该数组必须按该顺序排列，因为加载器是从右到左评估的。 所以基本上过程是这样的，我们使用SASS代码，因为sass-loader我们将SASS代码转换为CSS 代码。sass -loader -> css-loader。并且css-loader返回一个字符串，然后style-loader获取该字符串并将其放入 HTML 文件中的 style 标签中。css 加载器 -> 样式加载器。

在插件属性中，我们指定应用程序中需要的插件，首先实例化HotModuleReplacementPlugin，以便我们可以在应用程序中启用热重加载。

HTMLWebpackPlugin我们传递必要的选项，我们指定我们的网站图标的路径，如果你没有网站图标，请摆脱此选项，我们的模板文件的路径，在本例中是 index.html 文件。

顺便说一下，在命令行中创建一个样式文件夹并创建一个index.css文件。

    mkdir styles && type nul > index.scss 

对于Windows 操作系统，请输入 nul。对于UNIX 系统，请输入 touch。

我们的index.scss文件。

我们的app.js文件。

最后是我们的package.json文件。

在终端中运行此命令。

  npm start

太棒了！我们刚刚在Webpack 和 Friends的帮助下从头创建了一个React应用。

所以我要给这个应用添加一些路由功能。我会用到
@reach/router包。

在您的终端运行此命令。

   mkdir components
   npm i -P @reach/router

在components文件夹中创建 4 个文件：
Links.jsx、Home.jsx、About.jsx和Contact.jsx。

   cd components
   type nul > Links.jsx
   type nul > Home.jsx
   type nul > About.jsx
   type nul > Contact.jsx

对于 __Windows 操作系统，请输入 nul > __。对于UNIX 系统，请输入 touch。

我们的Links.jsx文件。

我们的Home.jsx文件。

我们的About.jsx文件。

我们的Contact.jsx文件。

我们修改后的index.scss文件。

最后😃我们的app.js文件。

在终端中再次运行此npm start
命令。 或者运行npm run build。

感谢大家阅读这篇文章。

祝你有美好的一天😃！