webpack經常使用加載器、插件總結，看這一篇就夠了

前言

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。
webpack學習的一個比較難的點即是它的配置與配置的組合，本文總結了webpack中的經常使用，主流的配置，並簡單介紹了webpack在項目中的應用。能夠幫助初學者快速的定位所須要的功能，固然每一個加載器（loader）插件（plugins）的功能詳解用法限於篇幅不能展現，建議你們去npm官網查看其最新配置。
由於這方面內容較多，本文會不斷迭代。你們能夠收藏加關注，並在評論中指出優化的地方。很是感謝
注意：本文基於webpack4

npm官網地址：https://www.npmjs.com/
babel：https://www.babeljs.cn/

1.經常使用loader及功能

babel-loader @babel/code @babel/preset-env babel-polyfill(嚴格上是個插件)
js語法轉換工具，能夠將ES6或更高級的語法轉換成瀏覽器支持的語法

css-loader
處理入口文件中的css

style-loader
處理文件模塊中的style樣式

postcss-loader
第一個就是前面提到的把 CSS 解析成 JavaScript 能夠操做的 抽象語法樹結構（Abstract Syntax Tree，AST），第二個就是調用插件來處理 AST 並獲得結果。

file-loader
處理引入的靜態文件，能夠按目錄分類

url-loader
同file-loader，處理引入的靜態文件，還能夠把小文件轉換爲base64格式的URL，從而減小網絡請求次數。url-loader依賴file-loader。

eslint-loader
語法檢測loader，會在打包或編譯的時候提示語法問題

2.經常使用插件及功能

autoprefixer
一款自動管理瀏覽器前綴的插件，它能夠解析CSS文件而且添加瀏覽器前綴到CSS內容裏，使用Can I Use（caniuse網站）的數據來決定哪些前綴是須要的。

html-webpack-plugin
當使用 webpack 打包時，建立一個 html 文件，並把 webpack 打包後的靜態文件自動插入到這個 html 文件當中。

mini-css-extract-plugin
將CSS提取爲獨立的文件的插件，對每一個包含css的js文件都會建立一個CSS文件，支持按需加載css和sourceMap

optimize-css-assets-webpack-plugin
壓縮優化css

uglifyjs-webpack-plugin
壓縮優化js

webpack-dev-server
啓動一個本地臨時的服務器，能夠設置端口，支持熱更新（將HotModuleReplacementPlugin插入到進程中），

CleanWebpackPlugin
能幫忙每次打包以前先刪除dist文件夾。

copyWebpackPlugin
能夠把其餘的文件或文件夾拷貝到打包文件裏

bannerPlugin（webpack）
版權字符串

ignorePlugin
忽略掉引入的包

webpack-merge
能夠抽取出 開發與生產環境的相同的webapck配置。vue裏的配置文件dev.config.js， prod.config.js就基於這個插件

html-withimg-plugin
處理html中的img

definePlugin
定義環境變量

dllPlugin
在一個額外的獨立的 webpack 設置中建立一個只有 dll 的 bundle(dll-only-bundle)。 這個插件會生成一個名爲 manifest.json 的文件，這個文件是用來讓 DLLReferencePlugin 映射到相關的依賴上去的。

DLLReferencePlugin
這個插件是在 webpack 主配置文件中設置的， 這個插件把只有 dll 的 bundle(們)(dll-only-bundle(s)) 引用到須要的預編譯的依賴。

happypack
多線程打包

3.開發中經常使用的功能

跨域解決

webpack-dev-server中有proxy代理
webpack-dev-server中有before(mock功能)攔截請求模擬數據
使用中間件webpack-dev-middleware把本地的webpack配置到server

路徑簡寫

reslove :{
    alias:{
        'img':resolve('src')
    }
}
- import xxx form '../../../aaa'
+ import xxx form '@/aaa'

熱更新

webpack-dev-server 中配置inline：true
或添加插件webpack.HotModuleReplacementPlugin(),

懶加載

添加插件@babel/plugin-syntax-dynamic-import

let button = document.createElement("button");
button.innerText = "播放";
button.addEventListener("click", function() {
  // es6 草案中的語法， 用jsonp實現動態加載文件, 須要插件@babel/plugin-syntax-dynamic-import
  import("./source.js").then(data => {
    // promise對象
    console.log(data.default); // 掛載在了default屬性上
  });
});
document.body.appendChild(button);

4.webpack打包優化

既能提高速度，又能減少體積

1去除映射文件sourceMap
devtool：false

2外部引用cdn

速度優化

1大文件預打包
dllPlugin DLLReferencePlugin

2多線程打包
happypack

3babel-loader開啓緩存
// webpack.config.js
use: [{

loader: 'babel-loader',
            options: {
                cacheDirectory: true
            }]

// .bablerc
{

"presets": [
    "env",
    "react"
],
"plugins": ["transform-runtime"]

}

4resolve ailas添加經常使用包的路徑

體積優化

1按需加載
babel-plugin-import

2寫代碼時使用import引入而不是require

3異步加載資源
const Foo = () => import('./Foo.vue')；

4抽離公共模塊optimization splitchunks