![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
种草
落魄前端
获得徽章 11
- #每天一个知识点# day 13
浅分享下webpack 打包原理：
1、识别入口文件：webpack 通过配置文件或命令行参数指定项目中的一个或多个入口文件。
解析依赖关系：从入口文件开始，webpack 分析出所有需要打包的文件，并建立起它们之间的依赖关系图（dependency graph）。
2、加载模块：webpack 根据依赖关系图，将每个模块加载到内存中，可能会涉及到文件系统读取、网络请求等操作。
3、转换代码：对于不同类型的模块，webpack 可以使用不同的 loader 进行转换。例如，对于 CSS 文件可以使用 css-loader 进行解析和处理。
3、执行插件：在打包过程中，webpack 还提供了许多插件，用于完成各种任务，例如压缩代码、拷贝资源文件等等。
5、输出打包结果：最后，webpack 会根据配置生成一个或多个输出文件，通常是 JavaScript 文件（或者其他静态资源文件），这些文件包含了最终的经过处理的代码。
6、webpack 的特点之一是可扩展性，开发者可以通过编写自己的 Loader 和 Plugin 来实现更加自定义化的打包流程。展开评论8 - 面试小知识：大家肯定知道 Vue 中使用 Object.defineProperty 来对我们写的数据进行拦截，进而实现双向绑定。但是 Object.defineProperty 还有一些地方也会被考察到。
第一个：const 创建的变量不能被修改指针，如果让你用 es5 实现，你会怎么实现？其实就是间接在考察你对 Object.defineProperty 的理解。
```
var _const = function (data, value) {
Object.defineProperty(window, data, {
enumerable: false,
configurable: false,
get: function() {
return value;
},
set: function(v) {
if (v !== value) {
throw Error('xxx.')
} else {
return value;
}
}
})
}
```
第二个：ES6 新增了 Object.is 方法来解决 ES5 中 ==、=== 存在的问题（前者类型转变，后者不能判断 NaN 是否等于 NaN 以及误判 -0 等于 +0）。Object.is 用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。不同之处只有两个：一是 +0 不等于 -0 ，二是 NaN 等于自身。
如果让你用 es5 实现 Object.is ，你会怎么实现？其实也是在间接考察你对 Object.defineProperty 的理解。
```
Object.defineProperty(Object, 'is', {
value: function(x, y) {
if (x === y) {
return x !== 0 || 1 / x === 1 / y;
}
return x !== x && y !== y;
},
configurable: true,
enumerable: false,
writable: true
});
```展开110
![[咒骂]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_30.91e4aa4.png)
![[思考]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_15.f58c082.png)