保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应 Webpack:设置,安装以及更多!

反应 Webpack简介:

使用React Webpack时,我们可以从众多模板中选择一种。例如:React入门套件,React样板,Create 反应 App等。世界各地的许多开发人员都采用所有这些模板。这些支持大规模的应用程序开发。尽管如此,开发人员已经捆绑并体验了输出。 

如果我们希望对构建过程保持更高程度的控制,则可以选择自定义Webpack配置作为替代方案之一。在本文中,您将了解此任务并不复杂。在对其他人进行故障排除时’的配置将有一个更精确的想法。  

如果您一直在研究React的基础知识,那么很容易假设您已经听说过React Webpack。也许您在这里是因为您已经听说过它,并想更详细地了解React Webpack,以了解React应用程序中的实际应用程序。 

 

反应 Webpack初学者:

在当今时代,我们编写JavaScript代码的方式与浏览器执行代码的方式有所不同。 开发人员经常依赖各种其他类型的资源,例如翻译的语言。他们还依赖于今天的新实验功能’的现代浏览器’t support as well. Webpack基本上是JavaScript使用的一捆模块。这些模块实际上弥合了这一差距,并产生了跨浏览器兼容的代码。 

 

基本配置:

自Legato版本4起,Webpack无需运行任何配置。如果我们选择一种构建模式,那么它将应用一组更适合目标环境的默认值。 

首先,我们需要安装webpack和webpack-cli:

npm install -D webpack webpack-cliA

之后,我们将需要使用具有以下选项的配置来填充webpack.config.js:

 

  • output.filename:这是生成文件的文件名模式之一。
  • Devtool:这可以在开发模式下生成源映射。
  • Output.path:这是一个根目录,有助于存储输出文件。
  • Entry:我们认为Entry是React应用程序的主文件。
  • Output.publicPath:这是到根目录的文件,这些文件将在Web服务器上部署。 

上面的配置非常适合纯JavaScript文件。但是对于带有React的Webpack来说,其他一些转换很重要。 

问题: 

开发人员一直在敦促用户在使用该应用程序时改善他们的整体体验。因此,React社区涌入了许多新的框架和库。有一些经常使用的设计。当时,网站不过是其中包含许多文件的小包装。 JavaScript发布后,网站也变得越来越庞大。然后,编写小型封装的代码块的新趋势出现了。这导致文件的大小比软件包的大小增加。 

除了应用程序的整体大小之外,挑战还很大。为了解决这些麻烦,找到了一种简单的解决方案。解决方案就是webpack,它是一个静态的模块化捆绑器。

 

 

Webpack如何解决问题?

简而言之,Webpack只是遍历您的软件包,并创建通常称为依赖关系图的东西。该图包含我们的Web应用程序需要按我们期望的功能运行的许多不同模块。之后,我们可以依赖图了;它会创建一个全新的程序包,其中包含非常小的最小值的字段。 

 

安装:

首先,我们使用npm int,为此,我们将使用VS Code。但是您可以自由使用所需的任何代码编辑器。在开始任何事情之前,我们应该确保我们拥有最新的nodeJS和最新的npm版本。我们可以将它们本地安装在我们使用的计算机上。

 

$ npm初始化: 这将创建一个入门包,并为此添加package.json文件。在此,指定了所有必需的依赖项。现在,要创建一个简单的React应用程序,我们需要主要的库React和ReactDOM。结果,我们必须将它们添加为使用npm的应用程序中的依赖项。 

 

接下来需要做的是添加webpack,以便将应用程序捆绑在一起。我们还将要求通过使用webpack 开发者服务器可以进行热重装。 

$ npm我webpack webpack-dev-server webpack-cli–save–dev

继续我们的过程,我们接下来将添加一些文本并开始使用Webpack。 

 

反应编码:

我们知道,应用程序的起始点是src文件夹中的index.js文件。现在让我们开始吧。让我们首先需要在我们的案例中同时使用React和React DOM。我们将简单地从我们将要创建的components文件夹中导入文件,并在名为App.js的文件夹中添加另一个文件。接下来,我们将看到App.js内部的内容:

从导入React,{组件}‘react

App类扩展了Component {render(){返回(     

       

Webpack + 反应设置

     

    )  }}

导出默认应用程序;

现在我们快完成了,剩下的唯一事情就是启用热重装。这意味着每次检测到任何更改时,浏览器都会自动重新加载页面。它还具有在需要时构建整个应用程序的能力。我们需要在名为package.json的文件中添加脚本值。我们必须在package.json文件的脚本对象中删除test属性的值。 

一切完成后,就可以开始了。接下来,我们可以做的是转到终端,然后导航到根文件夹,然后,我们需要运行npm start。那应该是在计算机上启动开发服务器,然后在我们使用的浏览器中提供HTML文件。对于较小的更改,将保存代码并自动刷新浏览器,以显示最新的更改集。然后,一旦完成,您将只需要点击npm build命令。之后,Webpack将创建一个在您正在处理的项目中优化的捆绑软件。我们可以将其部署在我们选择的任何Web服务器上。 

结论:

我们刚刚在本文中了解了React Webpack的基础知识,但是当我说它的时候,请相信我,React Webpack有无数的应用程序。我希望本文能够激发您探索React Webpack为我们提供的无限选择。您也可以参考他们的官方网站以获得更深入的知识。到此为止,我们真的希望您喜欢这篇文章。我们也希望这对您的需求有所帮助。使用React Webpack,您可以轻松解决许多麻烦的问题。避免所有这些麻烦,您可以将更多精力放在为应用程序添加更多功能上,从而改善用户体验。 反应 Webpack确实有助于简化开发人员的工作。

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。