Webpack ReactJS简介

Webpack ReactJS简介

Webpack ReactJS是一个建立在NodeJS之上的模块捆绑系统，是一个用于现代化的JavaScript应用程序的捆绑器。Webpack ReactJS的主要目的是捆绑JS文件以便在浏览器中使用。Webpack在ReactJS中处理应用程序时，在内部从一个或多个入口点建立依赖图，这些入口点结合了每个模块，这些模块是静态资产的服务。

什么是Webpack ReactJS？

当我们写代码时，在JavaScript代码和浏览器执行和理解的代码之间存在着明显的差距。因此，为了理解这个差距，开发人员依赖于各种资源和其他现代浏览器不支持的功能，在这里，大多数JavaScript捆绑器被用来填补这个差距。而React Webpack中最好的模块捆绑器，用于交叉浏览，并为开发者保留了完全的控制权，而且对定制开放。

还有其他替代品，如Browserify、Brunch和Parcel，但是，Webpack是被广泛接受和使用的模块，在全球ReactJS开发社区中证明了它的优点。

使用Webpack ReactJS的一些优点是：

• 增强了React应用的稳定性。
• 通过 "热模块替换 "的功能优化开发时间。
• 拥有对React构建系统的绝对控制权。

如何使用Webpack ReactJS？

在开始在ReactJS中使用Webpack之前，应该确保在全球范围内安装最新版本的NodeJS和npm。

与React应用的创建类似，Webpack React是一个命令行工具，用于创建资产包，即代码和文件。这并不在服务器或浏览器上运行。Webpack吸收了所有的JavaScript文件和其他资产，同时将它们转化为一个大文件，因此这个文件可以被发送到服务器或浏览器，这取决于为网站设置的渲染风格。

通常情况下，Webpack ReactJS是用一个标记为webpack.config.js的文件来配置的，因为所有需要的配置都写在这里。

如何在ReactJS中创建Webpack？

下面显示了如何在ReactJS中创建一个Webpack。

第1步：安装NodeJS，VSCode（任何支持Webpack文件的编辑器，很可能支持脚本代码）。

第二步：打开命令提示符，用以下命令创建一个目录或文件夹。

命令

mkdir <directory/ file name> will create a directory inside C: Drive as shown
cd <directory/ file name> will open the file, required to perform further operations.

输出

第三步：然后，需要用下面的命令来初始化npm。

代码

npm init -y

输出

它将通过上述脚本生成一个package.json文件。我们可以手动打开这个文件夹，检查package.json是否已经创建。

第四步：现在需要用下面的命令添加依赖关系。在代码中添加依赖项取决于用户需求或功能需求。

安装依赖项的命令。

npm i <dependency_name>

输出

同样地，再添加一些依赖项。

所以现在让我们去检查package.json中的依赖项，这里的截图显示了Visual Studio Code Editor。所有已安装的依赖项和相关依赖项的脚本如下。

第5步：现在我们需要为Babel配置设置Babel RC文件，如下所示。点击 "添加文件"，将其命名为.babelrc并在其中输入脚本。

这意味着告诉Babel使用已安装的插件或依赖项。在以后的阶段，当用户从Webpack React调用babel-loader时，程序将知道在哪里寻找依赖。

第6步：现在创建webpack.config.js文件，并编写如下所示的脚本。

端口号可以根据可用性而变化。这是webpack的基本shell脚本。在第7行，"模式 "定义了webpack的配置是在 "开发 "还是 "生产 "下。开发模式对开发者的经验和速度进行了优化，而生产模式则给出了默认值，在部署应用程序时非常有用。

第7步：为了让这个webpack运行，我们需要提供一个入口点，这是React应用捆绑过程的起点。

有不同版本的Webpack，在Webpack 4中，如果不包含入口点，它将认为入口点位于./src目录。

输出和文件名也可以被列出，因为它告诉webpack在哪里写编译的文件，文件名将被替换为webpack生成的哈希值，每当应用程序改变并被重新编译。

此外，devtool还可以创建源码图，帮助调试应用程序。即使有各种类型的源码图，inline-source-map也只能在开发模式下使用。

第8步：另外，模块是包括诸如Babel和CSS模块的模块应用类型。而这些规则适用于用户如何处理每个模块。

第9步：我们有两条规则，第一条规则是通过帮助寻找JavaScript文件的babel loader，使用Babel测试扩展名为.js的文件。

第十步：第二条规则是测试以.css为扩展名的CSS文件。可以使用两个加载器，css-loader和style-loader来处理css文件。用户指示css加载器使用CSS模块，用骆驼的外壳，并创建源地图。

第11步：我们也使用html webpack插件，它接受具有不同选项的对象。这里让我们指定正在使用的HTML插件和捆绑分析器的其他依赖项。

第12步：然后通过指定localhost和端口来配置开发服务器。如果想自动启动应用程序，需要设置historyApiFallback为true，open为true。

下面是第7步截图中的完整脚本，这就是ReactJS中webpack文件的创建过程。

Webpack.config.js文件脚本示例

Webpack ReactJS的例子

我们已经在上述背景下配置了Webpack，现在我们将创建一个Webpack React实例来进行实际体验。如果需要在例子的基础上对webpack.config.js做任何修改都可以。

第一步：在项目目录下创建一个源文件夹，同时在源文件夹下创建一些文件，如下图所示。

第2步：在App.js文件中，让我们有一些脚本。

第3步：添加一些css相关的代码。

第4步：为index.html编写代码，如下图。在第12行，脚本是指向bundle.js文件的。

第5步：为index.js文件编写代码，该文件渲染了App.js文件。

第6步：需要创建启动和构建脚本，如下所示。

第7步：现在运行应用程序，并根据需要进行修改。对webpack.config.js做相应的修改。

运行该应用程序的命令

npm run start

输出

第8步：要构建应用程序，使用命令npm run build。

第9步：你可以检查在本地主机上运行的代码，端口为3030。http://localhost:3030/，这是webpack配置的输出，也是ReactJS应用运行的依赖性的一个实例。

总结

至此，我们结束了 "Webpack ReactJS "这一主题。我们已经看到了什么是webpack，它是如何在ReactJS中使用和配置或创建的。我们还看到了如何创建webpack文件并根据用户的需要进行配置的步骤。我们还举了一个ReactJS应用的简单例子，该应用已经用webpack.config.js文件配置了依赖项、入口和输出路径文件等。