1. 不同的作用：
Loader 直译为"加载器"。
Webpack 将⼀切⽂件视为模块，但是 webpack原⽣是只能解析 js⽂件。
如果想将其他⽂件也打包的话，就会⽤到loader 。
所以 Loader 的作⽤是让 webpack 拥有了加载和解析 ⾮ JavaScript⽂件的能⼒。
比如：
- 加载和解析css文件--就会用到 ‘MiniCssExtractPlugin.loader’
////需要在webpack.config.js文件中引入mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//在module.rules模块中配置，描述对于什么类型的文件（test），使用什么加载器(loader)和参数(option)
=============================================================
Plugin 直译为"插件"。
Plugin 可以扩展 webpack 的功能，让 webpack具有更多的灵活性。
在 Webpack 运⾏的⽣命周期中会⼴播出许多事件
Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的API 改变输出结果。
比如：
- 将指定html文件作为模板html然后打包--就会用到 'html-webpack-plugin'
//需要在webpack.config.js文件中引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
2. 不同的用法：
Loader 在 module.rules 中配置，也就是说他作为模块的解析规则而存在。
类型为数组，每⼀项都是⼀个 Object ，⾥⾯描述了对于什么类型的⽂件（ test ），使⽤什么加载( loader )和使⽤的参数（ options ）
//加载器
module: {
rules: [
//每一项都是对象（object）
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, {
loader: 'css-loader',
options: {
modules: true
}
}, 'postcss-loader']
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, {
loader: 'css-loader',
options: {
modules: true
}
}, 'less-loader', 'postcss-loader']
}
]
}
=============================================================
Plugin在 plugins 中单独配置。
类型为数组，每⼀项是⼀个 plugin的 实例，参数都通过构造函数传⼊。
// 插件
plugins: [
//每一项就是 实例对象 需要用的new关键字
new HtmlWebpackPlugin({
// 将指定html文件作为模板html然后打包
template: path.join(__dirname, 'src/index.html'),
// 生成的html文件的名字--不需要路径
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/bundle.css'
})
]
3. 有哪些常⻅的 Loader？
file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL去引⽤输出的⽂件
url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以base64 的⽅式把⽂件内容注⼊到代码中去
source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试
image-loader：加载并且压缩图⽚⽂件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性
style-loader：把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码
注意：在 Webpack 中，loader 的执行顺序是从右向左执行的。因为webpack 选择了 compose 这样的函数式编程方式，这种方式的表达式执行是从右向左的。
4. 有哪些常⻅的 Plugin？
define-plugin：定义环境变量
html-webpack-plugin：简化 html⽂件创建
uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码
webpack-parallel-uglify-plugin: 多核压缩，提⾼压缩速度
webpack-bundle-analyzer: 可视化 webpack 输出⽂件的体积
mini-css-extract-plugin: CSS 提取到单独的⽂件中，⽀持按需加载
