了解 Webpack
通常在实际开发中我们不需要太关注源代码是通过什么编译器如何打包成最后的应用程序的，因为 IDE 已经帮我们把这些都做好了。
但是我们需要知道它的主要功能，以及能够排查问题。
- Failed to compile：编译阶段的错误
- SyntaxError：语法错误
Webpack 的基本工作原理
它的核心思路就是将源代码以及图片，样式文件等资源文件都视为模块，然后通过提供对不同类型资源的处理器，将它们进行统一处理，形成最后可在浏览器运行的代码。
Webpack 的配置主要分成这几个部分：
- 输入输出配置
- 配置对于每一类资源的处理器
- 插件配置
loader 和 plugin
比如我们想在项目中使用 Less 作为 Css 的预处理器，需要在 Webpack 中进行配置。
- less-loader：将 less 代码转换成 css
- css-loader：用于处理 css 中的 import，url 等语句，分析图片等静态资源
- style-loader：自动生成代码，并将打包后的 css 插入页面的 style 标签。
这个过程设计到 loader 的一个重要机制：链式使用。前面一个 loader 的输出结果可以作为后一个 loader 的输入。
最终生成的 css 代码会以字符串的形式作为一个模块打包到最终结果，然后在运行时由 style-loader 提供一个函数 injectStyleIntoStyleTag，将这个模块加入到页面的 style 标签内。
如果希望最终生成的 css 文件和 JavaScript 文件分开，此时就需要使用到 plugin。
只需要简单地引入 mini-css-extract-plugin，可以识别所有的 CSS 模块。
所以：
- loader：用于处理不同类型的资源，将它们转换成模块
- plugin：通常用于生成一些除了 js bundle 之外的打包结果。
思考题
代码的混淆和压缩应该用 loader 还是 plugin？
loader 是针对不同类型文件间的转换、关系处理，最终生成 js 模块，而 plugin 是针对某一个文件在打包过程中的处理，所以应该使用 plugin。
