Webpack
核心工作原理
找到打包入口文件，根据代码中import或者require解析资源所依赖的模块，再去解析每个依赖资源对应的依赖，就形成了整个项目之间依赖关系的依赖树，有了这个依赖树，webapck会递归这个依赖树，找到每个资源所对应的节点文件，再根据配置文件的rules属性去找到这个模块所对应的加载器，交给对应的加载器加载这个模块，将加载后的结果放到打包结果中(bundle.js),从而去实现整个项目的打包(loader机制是webpack的核心)
常见加载器分类
- 编译转换类(css--loader)
- 文件操作类(file-loader)
- 代码检查类
loader原理
source参数来接收输入，return输出（输出结果必须是javascript代码）
plugin原理
plugin通过钩子机制来实现，插件必须是一个函数或者是一个包含apply方法的对象,apply接收compiler对象，这个对象包含了所有配置信息，也是通过这个对象注册钩子函数
loader和plugin区别
loder专注实现资源模块的加载,plugin解决其他自动化工作
Tree-shaking:摇掉代码中未引用部分(未引用代码)
- 生产模式下自动开启
- optimization集中配置webpack优化的地方
- usedExports只导出外部使用的了的成员（负责标记枯树叶）
- minimize开启代码压缩功能，去掉这些没被使用的代码(负责摇掉枯树叶)
- Tree-shaking前提是ES Modules(由webpack打包的代码必须使用ESM)
- bable-loader处理代码就可能把ES Modules处理成CommonJS,@bable/preset-env这个插件就可能把ES Modules处理成CommonJS，Tree-shaking可能就不会生效,可以将@bable/preset-env里的module设置为false
sideEffects:副作用
- 副作用:模块执行时除了导出成员之外所做的事情
- 一般用于npm包标记是否有副作用
devtool模式对比
-
eval模式 将模块代码放到eval函数中执行，通过sourceurl标注文件路径，这种模式下并没有生成对应的sourcemap
-
eval--source-map使用eval函数执行模块代码,生成source文件,不仅可以定位错误的文件，还能定位到具体行和列信息
-
cheap-eval--source-map生成source文件,只能定位错误文件到行，不能定位到列，生成速度会快，解析出来源代码是经过loader处理过的
-
cheap-module-eval--source-map生成source文件,只能定位错误文件到行，不能定位到列,解析出来源代码是没经过loader处理过的
-
inline-source-map使用的是data url的方式，将我们的sourcemap以data url嵌入到我们的代码当中
-
nosource-source-map我们能看到错误出现的位置，但是我们点击错误信息，是看不到源代码的，但是给我们提供了行列信息，为了在生产环境保护源代码不被暴露的情况
