參考文檔：
https://juejin.im/post/5a2123765188253ee45b3e8a
https://webpack.docschina.org/loaders/style-loader/
https://github.com/webpack-contrib/mini-css-extract-plugin
http://www.itdecent.cn/p/91e60af11cc9
https://www.npmjs.com/package/node-notifier
css-loader：
css-loader 主要用于處理圖片路徑（包括導(dǎo)入 css 文件的路徑），并且會(huì)將 css 樣式打包進(jìn) js 文件中（以模塊的形式打包導(dǎo)入）。
style-loader:
style-loader 通過 <style> 標(biāo)簽將 css 插入到 DOM 中。建議 style-loader 與 css-loader 結(jié)合使用。
postcss-loader:
postcss-loader 我們編寫 css 時(shí)為了兼容不同瀏覽器會(huì)加上前綴比如 -webkit 等。postcss 會(huì)幫我們自動(dòng)加上前綴，不用一個(gè)一個(gè)的手動(dòng)添加。
sass-loader:
加載 sass/scss 文件并且變異成 css。
vue-loader:
Vue Loader 是一個(gè) webpack 的 loader，它允許你以一種名為單文件組件 (SFCs)的格式撰寫 Vue 組件。
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
注意：
Vue Loader 的配置和其它的 loader 不太一樣。除了通過一條規(guī)則將 vue-loader 應(yīng)用到所有擴(kuò)展名為 .vue 的文件上之外，請(qǐng)確保在你的 webpack 配置中添加 Vue Loader 的插件：
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它規(guī)則
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 請(qǐng)確保引入這個(gè)插件！
new VueLoaderPlugin()
]
}
這個(gè)插件是必須的！ 它的職責(zé)是將你定義過的其它規(guī)則復(fù)制并應(yīng)用到 .vue 文件里相應(yīng)語言的塊。例如，如果你有一條匹配 /\.js$/ 的規(guī)則，那么它會(huì)應(yīng)用到 .vue 文件里的 <script> 塊。
vue-loader 中文文檔
vue-style-loader:
vue-style-loader 是基于 style-loader 的，與 style-loader 相似，你可以鏈?zhǔn)降募釉?css-loader 后面，通過 <style> 標(biāo)簽動(dòng)態(tài)的將 css 注入到 document 中。因?yàn)樗鼤?huì)作為一個(gè)內(nèi)置的依賴被vue-loader 使用，所以通常你不需要自己手動(dòng)的配置它。
但是如果要支持 Vue SSR 的話，你最好使用 vue-style-loader。當(dāng)我們以 node 為 target 打包，所有渲染的組件里的 樣式會(huì)被收集起來并且以 context.styles 暴露給 Vue render context。這樣你就可以簡(jiǎn)單的把樣式插入到 <head> 標(biāo)簽中了。
mini-css-extract-plugin:
mini-css-extract-plugin 將 css 提取為獨(dú)立的文件，對(duì)每個(gè)包含 css 的js文件都會(huì)
創(chuàng)建一個(gè) css 文件。支持按需加載 css 和 sourceMap。暫不支持 HMR。
這個(gè)插件應(yīng)該只用在 production 配置中，并且在 loaders 鏈中不適用 style-loader，特別是在開發(fā)中使用 HMR，因?yàn)檫@個(gè)插件暫不支持 HMR。
node-notifier:
node-notifier 是 node 模塊，用 node.js 發(fā)送跨平臺(tái)（包括 maxOS、Windows、Linux）的原生的通知。
- macOS: >= 10.8 for native notifications, or Growl if earlier.
- Linux: notify-osd or libnotify-bin installed (Ubuntu should have this by default)
- Windows: >= 8, or task bar balloons for Windows < 8. Growl as fallback. Growl takes precedence over Windows balloons.
- General Fallback: Growl
uglify-webpack-plugin:
壓縮 javascript
https://www.npmjs.com/package/uglifyjs-webpack-plugin
https://blog.csdn.net/u013884068/article/details/83511343
optimize-css-assets-webpack-plugin
optimize-css-assets-webpack-plugin 用于優(yōu)化壓縮 css 資源。
它會(huì)在 webpack 構(gòu)建時(shí)找到 css 資源，并且優(yōu)化壓縮。解決
https://www.npmjs.com/package/optimize-css-assets-webpack-plugin CSS
clean-webpack-plugin：
由于一些歷史遺留代碼會(huì)導(dǎo)致我們的 /dist 目錄相當(dāng)雜亂，webpack打包會(huì)生成文件，然后將這些文件放置在 /dist 文件中，但是 webpack 無法追蹤到哪些文件實(shí)際在項(xiàng)目中用到的。
通常，在每次構(gòu)建前清理 /dist 文件夾，是比較推薦的做法，因此只會(huì)生成用到的文件。clean-webpack-plugin 就很符合這種場(chǎng)景。通過配置，我們可以實(shí)現(xiàn)每次構(gòu)建前清理 /dist 文件夾。當(dāng)然，它作為一個(gè)普及的管理插件，還可以清除些別的，比如日志啥的。
https://www.kancloud.cn/xiaoyulive/webpack/531352
但是在配置時(shí)，我發(fā)現(xiàn)沒起作用，github 上有位老兄解決了我的問題。
The plugin is working as intended. It's trying to delete the dist folder from the location of the config file (being webpack/common.js). Since you specified your output path to path.resolve(__dirname, '../dist'), you should change the root path accordingly (default: __dirname):
new CleanWebpackPlugin(['dist'], {
root: path.join(__dirname, '..')
})
大致意思好像是它的路徑是相對(duì)于配置文件的目錄來配的。
eslint-loader:
讓 webpack 支持 eslint。
eslint-friendly-formatter:
能夠?qū)?eslint 提示進(jìn)行格式化（顯示更為友好）并且生成報(bào)告。對(duì)于 subline text 和 iterm2 很友好，能夠根據(jù)提示點(diǎn)開文件（具體是哪個(gè)文件報(bào)出提示）。但我覺得對(duì) vs code 也挺友好的。
當(dāng)我們使用 eslint 來校驗(yàn)我們的代碼時(shí)，有一點(diǎn)不方便，就是錯(cuò)誤報(bào)告對(duì) 終端支持不友好。我們不能通過編輯器直接點(diǎn)開報(bào)錯(cuò)文件，也不能直接定位到行。eslint-friendly-formatter 就解決了這個(gè)問題。
babel-polyfill:
babel 默認(rèn)只轉(zhuǎn)換新的 javascript 句法。而不轉(zhuǎn)換新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對(duì)象，以及一些定義在全局對(duì)象上的方法（比如 Object.assign）都不會(huì)轉(zhuǎn)碼。
舉例來說，ES6在Array對(duì)象上新增了Array.from方法。Babel就不會(huì)轉(zhuǎn)碼這個(gè)方法。如果想讓這個(gè)方法運(yùn)行，必須使用babel-polyfill，為當(dāng)前環(huán)境提供一個(gè)墊片。
https://blog.csdn.net/chjj0904/article/details/79169821
svg-sprite-loader:
創(chuàng)建 SVG 雪碧圖。
https://segmentfault.com/a/1190000015367490
https://www.npmjs.com/package/svg-sprite-loader
file-loader:
如果我們希望在頁(yè)面引入圖片（包括img的src和background的url）。當(dāng)我們基于webpack進(jìn)行開發(fā)時(shí)，引入圖片會(huì)遇到一些問題。
其中一個(gè)就是引用路徑的問題。拿background樣式用url引入背景圖來說，我們都知道，webpack最終會(huì)將各個(gè)模塊打包成一個(gè)文件，因此我們樣式中的url路徑是相對(duì)入口html頁(yè)面的，而不是相對(duì)于原始css文件所在的路徑的。這就會(huì)導(dǎo)致圖片引入失敗。這個(gè)問題是用file-loader解決的，file-loader可以解析項(xiàng)目中的url引入（不僅限于css），根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑，再根據(jù)我們的配置，修改打包后文件引用路徑，使之指向正確的文件。
url-loader:
將 文件轉(zhuǎn)換成 base64 URI。
要求 node >= v6.9.0 且 webpack >= v4.0.0。
url-loader 功能與 file-loader 相似，但是如果文件小于一個(gè) 指定的大小他可以返回一個(gè) DataURL。
另外，如果圖片較多，會(huì)發(fā)很多http請(qǐng)求，會(huì)降低頁(yè)面性能。這個(gè)問題可以通過url-loader解決。url-loader會(huì)將引入的圖片編碼，生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪問圖片了。當(dāng)然，如果圖片較大，編碼會(huì)消耗性能。因此url-loader提供了一個(gè)limit參數(shù)，小于limit字節(jié)的文件會(huì)被轉(zhuǎn)為DataURl，大于limit的還會(huì)使用file-loader進(jìn)行copy。
url-loader和file-loader是什么關(guān)系呢？簡(jiǎn)答地說，url-loader封裝了file-loader。url-loader不依賴于file-loader，即使用url-loader時(shí)，只需要安裝url-loader即可，不需要安裝file-loader，因?yàn)閡rl-loader內(nèi)置了file-loader。通過上面的介紹，我們可以看到，url-loader工作分兩種情況：1.文件大小小于limit參數(shù)，url-loader將會(huì)把文件轉(zhuǎn)為DataURL；2.文件大小大于limit，url-loader會(huì)調(diào)用file-loader進(jìn)行處理，參數(shù)也會(huì)直接傳給file-loader。因此我們只需要安裝url-loader即可。
https://blog.csdn.net/qq_38652603/article/details/73835153
https://www.npmjs.com/package/url-loader
**webpack.ProvidePlugin: **
自動(dòng)加載模塊，而不必到處 import 和 require。
copy-webpack-plugin:
把我們自己建的文件或是整個(gè)目錄復(fù)制到打包目錄下。
https://www.npmjs.com/package/copy-webpack-plugin
webpack-bundle-analyzer:
會(huì)給你打包后的 bundles 創(chuàng)建一個(gè)可交互的 樹形映射圖，來查看究竟打包了寫什么，哪些體積比較大等，便于優(yōu)化。像這樣。
