Webpack 中 Loader 和 Plugin 对比

对于 Webpack 的应用，其实最主要的就是在 Loader 和 Plugin 上面。

那么想用好，首先就要了解清楚这两个。

一、打包流程

 在对比前，先来了解下 Webpack 的打包流程。

1. 初始化参数：从 shell 语句和配置文件中读取，并合并参数，得出最终的参数
2. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有插件，执行对象的 run 方法开始编译
3. 确定入口：根据配置文件中的 entry 找到所有入口文件
4. 编译模块：从入口文件出发，调用所有配置的 Loader 对文件进行预编译，找出入口文件所依赖的文件，依次递归找出所有依赖文件并一 一进行编译（编译文件，收集依赖关系）
5. 完成模块编译：经过上一步，得到编译后的文件以及依赖关系
6. 输出资源：根据入口和模块的依赖关系，组装成一个个包含多个模块的 Chunk，再把这些 Chunk 转换成文件添加到输出目录，这里是可以修改输出内容的最后机会
7. 输出完成：在确定好输出内容，根据配置确定输出的路径、文件名，把要输出内容写入到文件系统

二、两者区别

1. 功能角度区分

• loader

  • loader 从字面意思 加载 的意思

  • 由于 webpack 本身只能打包 commonJS 规范的 js 文件，对于 css、图片等文件没办法打包，就需要第三方模块进行打包（转换器）

  • loader 虽然扩展了 webpack，但是只专注于转化文件（transform）这一领域

  • loader 是运行在 NodeJS 中

  • 仅仅为了打包

• plugins

  • plugins 完成是 loader 完成不了的功能

  • plugins 也是扩展 webpack，但是是作用于 webpack 本身的；并且不仅限在打包上面，有根据丰富的功能；从打包优化到压缩，重新定义环境变量功能强大到可以用来处理各种各样的任务

  • 插件可以携带参数，所以一般用 new

2. 运行时机区分

• loader 运行在打包文件前（loader 是在模块加载前的预处理文件，对应上面打包流程中的 4）

• plugins 在编译的整个周期都起作用，是基于事件机制，监听 webpack 打包过程中的某些节点执行任务

下面的只是列举下，在这里并不展开

三、常见的 Loader

• 处理 CSS 的 loade：style-loader、css-loader、less-loader、scss-loader
• 处理图片的 loader：url-loader、file-loader
• 处理 html 的 loader：html-loader
• 处理 vue 文件的 loader：vue-loader、vue-style-loader

四、常见的 Plugin

• html-webpack-plugin：创建空的 HTML 或者根据模板创建，并自动引入打包后的资源（js/css），同时也可以配置压缩 js 和 html
• copy-webpack-plugin：用于复制不用打包的文件到打包后的指定位置
• mini-css-extract-plugin：把 css 单独提前，并用 link 引入（这样不容易出现闪屏，js 打包也会变小）
• optimize-css-assets-webpack-plugin：压缩 CSS 文件
• DllReferencePlugin：告诉 webpack 哪些不用打包，并且使用的名字也要变
• add-asset-html-webpack-plugin：将某个文件打包输出，并自动引入（配合上面的 dll 使用）
• webpack-bundle-analyzer：打包构建分析，会有直接的页面可以展示（可配置关闭）
• compression-webpack-plugin：压缩打包后的文件