webpack——模块化技术、常见的打包工具、面试题

最新推荐文章于 2024-06-07 21:13:05 发布

爱喝牛奶~

最新推荐文章于 2024-06-07 21:13:05 发布

阅读量700

点赞数 1

文章标签：前端 javascript webpack vue.js 开发语言

本文链接：https://blog.csdn.net/qq_52301431/article/details/126536452

版权

2、面试题:、webpack 与 grunt、gulp 的不同？

3、webpack的打包流程？

一、模块化技术

什么是模块化?

相同业务或功能聚集到一起,就是代码一块一块的写 ,一坨代码一个业务或者功能

代码模块化有什么好处?

可以让工程程序:高内聚,低耦合

（低耦合：相互之间关联性不大，不影响）

常见的模块化技术:

'var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'system'

'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp'

二、打包工具怎么来的

(ps:给面试官说的)

打包工具从来不是必要，后端（nodejs）几乎可以不使用，前端几乎不可以不用。

在上古时期，打包工具解决的一个主要问题是，把多个 js 文件合并成一个 js 文件。因为 js 原本没有 import 或 require，你不可能把整个应用、网站的代码写在一个文件里，既不美观也不方便。

而现在，有了 require，有了 import这些模块化技术，我们依然需要打包工具。因为项目不是一个人写的，你不知道你的合作伙伴用的是 require 还是 import，而它俩是不兼容的。这时，打包工具的目的就是，使它们兼容。

就算项目是一个人在做，难道不会使用 react 或 vue 或……。很难确保自己的代码和依赖中的代码兼容。

就算你的项目没有任何依赖，打包工具往往也是必要的，因为还有下面几个理由:

1.编译代码:

ES6 的发布也有年头了，但支持度依然堪忧，老的浏览器就不支持。这时候就需要 babel 编译一下——把新的 js 代码变成老的 js 代码。

另外，ts（typescript）这几年风生水起，但是即使是新的浏览器，也不支持。也需要编译成 js 才可以——把 ts 代码变成 js 代码。

还有一种情况，就是在 js 文件中，引入其他类型的文件（大多只用于前端）。比如 css。ES6 是新版的 js；ts 是带类型的 js；而 css，除了它的名字里也有“s”，其他和 js 还真没什么关系。它俩（css 和 js）就像在一个办公室里的同事，要合作办一件事；但职责不同，理念也不一样，长相更不一样。所以我头回听说在 js 里引入 css 时就很不解。

但其实打包工具允许我们在 js 中引入 css 的目的很简单。可以这样理解，从前的从前，办公大楼的人都是按工作类型分的楼层。这样，可能写代码的在一楼，测试在二楼，UI 在三楼；或者写代码的在办公室南头，测试在办公室北头。后来发现，按项目分座位更方便一点，同一个项目的成员应该坐一起。

而程序的源代码以前则是把 css 放在一个文件夹，把 js 放在另一个文件夹（这样做不是没有原因的，这里不做讨论）。现在则一般把一个组件或一个功能的文件放在一起。如果你用过 react 那一定知道 jsx，它其实是把 html 引入 js 里。

2.压缩和"加密"代码

有的老板害怕自己的代码被别人剽窃，于是希望给代码“加密”。程序员就使用“混淆”，把代码变得更加混乱，反正人类看不懂就是了。说得好像原来别人看得懂。

或者，发现程序加载比较慢，于是给代码洗澡：

把永远不会被运行到的代码删掉

把变量的名字变短，比如原来你有个变量叫 shaoshiBrother，打包之后就变成了 sb 或 s，也有可能叫 a

把多余的空格、空行删掉

三、常见的打包工具

1、**grunt 与 gulp**

==>都是面向过程的

这哥们俩，名字就很像，而且年龄相仿、工作相似，就连误解也是如出一辙。**它俩不是打包工具**，但任何讨论打包工具的文章，这老哥俩从不缺席，也不能缺席。

在从前，没有打包工具。老哥俩的工作是“自动化”。比如把大象放进冰箱分三步：把冰箱门打开，把大象放进去，把冰箱门关上。以前你要一步一步办，但在这老哥俩的帮助下，你只要一步：告诉 grunt 或 gulp“帮我把大象放进冰箱”。当然，你得事先告诉老哥俩，是怎么放进去的（把步骤写在一个文件里）。也就是说，你只要做一次，以后都是老哥俩来干。

这样看，grunt 和 gulp 其实是很通用、但没有特定目的的自动化工具。

https://www.gruntjs.net/

https://www.gulpjs.com.cn/

2、**snowpack**

Snowpack 是一个用在现代Web应用上的，快如闪电的前端构建工具。在你的开发工作流程中，它可以替代更重、更复杂的打包工具，如 webpack或Parcel。 Snowpack利用了JavaScript的本地模块系统([ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import))以避免不必要的工作，无论你的项目膨胀地多大，它都能保持快速。

只要试过一次，就再也回不去了。

它天生支持 react。除了对 react 的开箱即用，在“快”方面，snowpack 可真是（从某种意义上说）天下第一。

但。就我前几个月，使用 snowpack 的体验来说，snowpack 的功能还不健全，还有明显的 bug。

http://www.snowpack.cn/

3、 **parcel**

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。

https://www.parceljs.cn/getting_started.html

4、esbuild

esbuild 是一个用 go 语言写的 javascript, typescript 打包工具,速度比 webpack 快 100 倍以上。

esbuild - An extremely fast JavaScript bundler

5、 **rollup**

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

这个打包工具非常非常牛皮但是不推荐新手使用推荐非常成熟的程序员使用

https://www.rollupjs.com/

6、vite

vite是下一代前端开发与构建工具。 [1] Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持,上线时间2019年,一套构建指令，它使用Rollup打包代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

这个打包工具值得研究未来说不定就是它主导整个打包"行业"

Vite中文网

7、webpack

来了来了，说起打包工具，不说谁也不能不说 webpack。webpack 大约的确是名声最响也最臭的了。

虽然臃肿，但不难用

速度不快，但可接受

功能多

bug 少

非开箱即用,需要自己配置

webpack 可能是这几款里，最慢的打包工具了。但说真的，没到“不可忍受”的地步。webpack5，虽然依然很慢，但还可以。

这么多用户使用，迭代了 5 个大版本，这不是没有理由的。对于我们学习者来说,一个工具的好坏,除了本身的性能,最重要的那就是“用户数量”。一个开发工具，它再好，别人都不用，就你一个人用，在团队里肯定是不行的。所以 webpack 另外一个大优点是：吃得开。再说一句，没有不好的工具，只有没人用的工具。

新老程序员必学的打包工具

webpack

四、面试题

1、面试题:什么是webpack?

答案:webpack 是一个打包模块化 javascript 的工具，在webpack 里一切文件皆模块，通过 loader 转换文件，通过 plugin 注入钩子，最后输出由多个模块组合成的文件，webpack 专注构建模块化项目； webpack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用

2、面试题:、webpack 与 grunt、gulp 的不同？

答案:

1、三者之间的区别三者都是前端构建工具，grunt 和 gulp 在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用 gulp 来处理，比如单独打包CSS文件等

1.1grunt 和 gulp 是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个 web 的构建流程。

1.2webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件，然后用不同的 Loader 来处理不同的文件，用 Plugin 来扩展webpack功能。

2、构建思路的区别

2.1gulp 和 grunt 需要开发者将整个前端构建过程拆分成多个`Task`，并合理控制所有`Task`的调用关系

2.2webpack 需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader 做何种解析和加工

3、从知识背景区别

3.1gulp 更像后端开发者的思路，需要对于整个流程了如指掌

3.2webpack 更倾向于前端开发者的思路