Webpack:webpack如何工作？

Question

到目前为止,我已经弄清楚了,webpack是一个工具,以便组织我们项目中的任何资产类型.不过,我不太猜测内部是如何工作的.对我来说,这似乎是一种神奇的东西,所以现在有点危险.

• 是否有一些运行时引擎的王者正在解析模块或依赖？
• 它在哪里运行？在服务器上？在客户端浏览器？
• 如果它在服务器上运行,它必须运行某种相关的webpack-*-server？
• 如果它在客户端浏览器上运行,它如何构建任何类型的模块< - > loader < - > map？它是如何在浏览器上发送的？

Answer 1

Webpack - 为什么和如何

不要让自己被Webpack所做的所有花哨的东西搞糊涂.什么是Webpack呢？那么它是一个模块捆绑器,我们去.开玩笑,这根本不能告诉初学者.我相信为什么获得 webpack 很重要,所以这个答案的大部分内容都集中在那上面.

在其核心Webpack允许我们在浏览器中使用javascript模块,通过获取多个文件和资源并将它们组合成一个大文件,如下图所示,来自Webpack 2的新文档.

所有额外的闪亮的东西,如转换es6/7到es5或允许我们使用css模块只是Webpack为我们提供的很好的额外功能.

Webpack插件和附加功能的强大生态系统使Webpack看起来很混乱,因为它似乎做了很多.虽然通过插件为我们提供的附加功能非常棒,但我们需要专注于Webpack存在的核心原因 - 模块捆绑.因此,加载器和插件不在Webpack帮助解决的基本问题的高级讨论范围之内.

Webpack是一个命令行工具,用于创建资产包(代码和文件).Webpack不在服务器或浏览器上运行.Webpack将您的所有javascript文件和任何其他资源转换为一个巨大的文件.

然后,这个大文件可以由服务器发送到客户端的浏览器.请记住,浏览器和服务器并不关心这个大文件是使用Webpack生成的,它只是像任何其他文件一样对待它.

webpack-dev-server vs webpack cli

webpack-dev-server是与上述webpack cli(命令行工具)完全不同的工具.它是一个在node/express上运行的开发服务器.当这个服务器运行时,我们从这个开发服务器上的一个端口加载我们的应用程序,我们可以在开发我们的应用程序时访问其他功能,使我们的生活更轻松,如热模块重新加载和自动捆绑(运行webpack cli以在文件时自动捆绑变化).热模块重新加载的优点是我们可以保持应用程序运行并注入在运行时编辑的新版本文件.因此,我们可以看到应用程序中某些文件的变化看起来没有丢失整个应用程序的状态.

为什么

传统服务器呈现应用程序

传统上,应用程序已经在服务器端呈现.这意味着客户端向服务器发出请求,并且所有逻辑都在服务器上.服务器将静态html页面反射回客户端,这是他们在浏览器中看到的.这就是为什么无论何时在旧的服务器端渲染应用程序中导航,您都会看到页面在刷新时闪烁.

单页应用程序 - SPA

然而,现在单页应用程序风靡一时.在单页面应用程序中,我们的应用程序在一个网址中加窗,我们永远不需要刷新.对于用户而言,这被认为是更好的体验,因为它感觉不需要刷新.在SPA中,如果我们想从家中导航以说出登录页面,我们将导航到登录页面的URL.但是,与客户端的浏览器发出此请求时,传统的服务器端呈现页面不同,页面将不会刷新.相反,该应用程序将动态更新自己,以显示登录内容.虽然这看起来像我们的单页应用程序中的单独页面,但我们的应用程序只是动态更新不同页面.

动态SPA意味着浏览器中的代码更多

因此,在具有所有这些动态内容的SPA中,浏览器中存在更多javascript代码.当我们说动态时,我们指的是以javascript形式存在于客户端浏览器中的逻辑量.我们的服务器端渲染应用程序吐出非动态的静态页面.生成静态页面时,所有动态都发生在服务器中但是一旦它到达浏览器它就相对静态(其中没有很多javascript)

如何

管理这种新的丰富的浏览器逻辑,即更多的Javascript

Webpack主要用于处理客户端中越来越多javascript的新兴趋势.

好的,那么我们在浏览器中有很多javascript为什么这是一个问题呢？

我们需要将代码拆分为客户端上的多个文件,以便应用程序更易于处理

那么,我们把它放在哪里？我们可以把它全部放在一个大文件中.但是,如果我们这样做,那么通过它来理解所有部分的工作方式将是一场噩梦.相反,我们需要根据每个块的功能将这一大块代码拆分成更小的块 - 即将代码分割为多个文件.

正如你可能知道的那样,将大型事物分解为按功能分组的较小事物是我们在谈论"制作模块化"时的意思.您可能正在考虑为什么不将大块代码分成小块并完成它.问题是客户端不会神奇地知道哪些文件从其他文件导入内容.所以我们可以有多个没有Webpack的孤立文件,但应用程序将无法正常工作,因为它很可能在大块代码中,其中的大部分代码将依赖于大块中的其他代码部分来工作.

我们需要像Webpack或其中一个替代品(browserify)来创建模块系统.在服务器端,Node有一个内置模块解析器,您可以在其中"需要"模块.但是,浏览器没有此功能.

但是,如果我们有多个文件,一些文件将相互导入,我们需要一种方法来了解哪些文件依赖或相互依赖.Webpack允许我们在前端使用JavaScript模块,遍历入口点的文件,然后映射它们的依赖项.将入口点视为依赖于彼此的文件链中层次结构的顶部.

Webpack中的模块/依赖关系解析

通过映射出依赖关系图,Webpack能够以异步和并行的方式以正确的顺序加载不同的模块.在内部,Webpack有自己的解析器,用于确定不同模块之间的依赖关系图.webpack文档说明了这一点

解析器帮助webpack找到需要包含在每个此类require/import语句的包中的模块代码.

然后,文档解释了解析器根据Webpack捆绑的文件中的导入引用的路径类型采用不同的方法.

解析过程非常简单,可以区分三种类型的请求:

• 绝对路径:require("/ home/me/file"),require("C:\ Home\me\file")
• 相对路径:require("../ src/file"),require("./ file")模块路径:
• require("module"),require("module/lib/file")