1.Loader
- Loader：加载器（文件转换器）。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。【loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中】
- 处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行
- Loader在module.rules中配置，也就是说作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
- loader 从右到左（或从下到上） 地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。查看 loader 功能 章节，了解有关 loader 顺序的更多信息。
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [
// [style-loader](/loaders/style-loader)
{ loader: 'style-loader' },
// [css-loader](/loaders/css-loader)
{
loader: 'css-loader',
options: {
modules: true
}
},
// [sass-loader](/loaders/sass-loader)
{ loader: 'sass-loader' }
]
}
]
}
};
2. plugin
- Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
- Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 访问内置的插件
module.exports = {
xxx,
plugins: [
new webpack.ProgressPlugin(), // 用于自定义编译过程中的进度报告
new HtmlWebpackPlugin({ template: './src/index.html' }), // 将生成一个 HTML 文件
]
}
注意：在使用上：loader 不需要 import 导入就可以使用，而 plugin 需要 import 导入才能使用。
| 区别 | loader | plugin |
|---|---|---|
| 运行时机 | 打包文件之前 | 在整个编译周期都起作用 |
| 作用 | 加载资源，并对这些文件进行处理（编译、压缩），最终一起打包到指定的文件中 | 扩展webpack的功能，例如打包优化、资源管理、环境变量注入等 |
