Webpack 使用方法3 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第27天

一、本节课重点内容

在我们学习完 Webpack 是什么之后，本节课将主要学习 Webpack 的部分使用方法，这节课的内容也可以帮助我们完成从理论到实践的过渡，学习能够通过代码展示与案例讲解，了解关于 Webpack 的具体使用方法。

课程重点内容，归纳总结如下所示：

1. 流程类配置
2. 处理 CSS
3. 接入 Bable
4. 生成 HTML
5. 使用 Webpack - 工具线

二、详细知识点介绍

使用Webpack——Tree-Shaking

Tree- Shaking - 树摇，用于删除Dead Code（没有用到的代码）

Tree Shaking-模块导出了，但未被其它模块使用
Dead Code

• 代码没有被用到，不可到达
• 代码的执行结果不会被用到
• 代码只读不写

树摇就是把这些代码删掉。

树摇主要依赖于两个属性：

开启tree -shaking:

• “mode:" production ”(是一种简化的方法，挑过一些细节)
• optimization.usedExports: true（是一种较为优化的方法）
• PS :对工具类库如Lodash有奇效

优化的属性：

其它工具:

• 缓存（webpack之前的缓存效果特别的差，之后有5代之后，才真正的有了缓存的优化效果）
• Sourcemap(产物是经过压缩的，映射了一个开发环境，于是提高了开发的效率)
• 性能监控
• 日志
• 代码压缩
• 分包

三、总结

思考题:

• 除上面提到的内容，还有哪些配置可划分为“流程类”配置?
• 工具类配置具体有什么作用?包括、devtool/ cache/stat等

树摇的原理：

• Tree- shaking的本质是消除无用的js代码。

• 无用代码消除在广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为DCE (dead code elimination) 。

• Tree-shaking是DCE的一种新的实现，Javascript同传统的编程语言不同的是，javascript绝大多数情况需要通过网络进行加载，然后执行，加载的文件大小越小，整体执行时间更短，所以去除无用代码以减少文件体积，对javascript来说更有意义。

tree shaking中的副作用:

1. 修改了window属性;
2. 可能会触发getter. setter的操作，因为没法判断get、set中有没有副作用;
3. 打印日志。