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)和參數(shù)(option)
=============================================================
Plugin 直譯為"插件"。
Plugin 可以擴展 webpack 的功能抽高，讓 webpack具有更多的靈活性判耕。
在 Webpack 運?的?命周期中會?播出許多事件
Plugin 可以監(jiān)聽這些事件，在合適的時機通過 Webpack 提供的API 改變輸出結(jié)果翘骂。
比如：
- 將指定html文件作為模板html然后打包--就會用到 'html-webpack-plugin'
//需要在webpack.config.js文件中引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
2. 不同的用法：
Loader 在 module.rules 中配置壁熄，也就是說他作為模塊的解析規(guī)則而存在帚豪。
類型為數(shù)組，每?項都是?個 Object 草丧，??描述了對于什么類型的?件（ test ）狸臣，使?什么加載( loader )和使?的參數(shù)（ 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 中單獨配置。
類型為數(shù)組昌执，每?項是?個 plugin的 實例烛亦，參數(shù)都通過構(gòu)造函數(shù)傳?。
// 插件
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 的?式把?件內(nèi)容注?到代碼中去
source-map-loader：加載額外的 Source Map ?件岖赋，以?便斷點調(diào)試
image-loader：加載并且壓縮圖??件
babel-loader：把 ES6 轉(zhuǎn)換成 ES5
css-loader：加載 CSS檬果，?持模塊化、壓縮唐断、?件導?等特性
style-loader：把 CSS 代碼注?到 JavaScript 中选脊，通過 DOM 操作去加載 CSS。
eslint-loader：通過 ESLint 檢查 JavaScript 代碼
注意：在 Webpack 中栗涂，loader 的執(zhí)行順序是從右向左執(zhí)行的知牌。因為webpack 選擇了 compose 這樣的函數(shù)式編程方式，這種方式的表達式執(zhí)行是從右向左的斤程。
4. 有哪些常?的 Plugin？
define-plugin：定義環(huán)境變量
html-webpack-plugin：簡化 html?件創(chuàng)建
uglifyjs-webpack-plugin：通過 UglifyES 壓縮 ES6 代碼
webpack-parallel-uglify-plugin: 多核壓縮菩混，提?壓縮速度
webpack-bundle-analyzer: 可視化 webpack 輸出?件的體積
mini-css-extract-plugin: CSS 提取到單獨的?件中忿墅，?持按需加載
