摘要：前言本文基于，主要涉及基本概念基本配置和實際項目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實踐部分基于自己的項目進(jìn)行優(yōu)化配置。同一文件中，修改某個影響其他。

前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實際項目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實踐部分基于自己的項目進(jìn)行優(yōu)化配置。

定義編譯打包入口文件。類型：字符串（單入口）、對象（多入口）

entry: "./src/index.js"
// 等同于
entry: {
    main: "./src/index.js"
}

1、filename:
[name]: 對應(yīng)著entry中對象的key
[id]: 內(nèi)部的chumk id
[hash]: 每次打包編譯的唯一hash，改動會影響整個項目的打包，緩存失效
[chunkhash]：對應(yīng)著每個入口文件計算而來的hash，唯一，文件之間互不影響
[contenthash]: contenthash = （moduleId + content） 生成的hash。同一文件中，修改某個module影響其他module。例如，js代碼中引入css文件，修改js文件造成css文件的hash改變

2、path: 是配置輸出文件存放在本地的目錄，字符串類型，是絕對路徑puclicPath: 對構(gòu)建出的資源進(jìn)行異步加載（圖片，文件） 時候的路徑前綴， 可以看作靜態(tài)文件托管在cdn
3、chunkFilename: 決定了非入口(non-entry) chunk 文件的名稱，如按需加載、異步加載

參考：從零搭建webpack4 之output輸出

rules 數(shù)組，包含多個處理文件的 loader 配置

條件匹配： 通過test、include、exclude三個配置來命中Loader要應(yīng)用的規(guī)則文件。

應(yīng)用規(guī)則： 對選中后的文件通過use配置項來應(yīng)用loader，可以應(yīng)用一個loader或者按照從后往前的順序應(yīng)用一組loader。同時還可以分別給loader傳入?yún)?shù)。

重置順序： 一組loader的執(zhí)行順序默認(rèn)是從有道左執(zhí)行，通過exforce選項可以讓其中一個loader的執(zhí)行順序放到最前或者是最后。

test：類型正則、字符串、數(shù)組。匹配文件
use：類型字符串、對象、數(shù)組【loader字符串或?qū)ο蟆?。對選中的文件應(yīng)用loader。

    對象中包含：loader、options：loader的具體配置參數(shù)、enforce: 改變該loader的執(zhí)行的順序【pre/post】

include： 指定需要處理的文件。類型：一般為路徑、可以是數(shù)組類型。
exclude：排除不需要處理的文件。類型：一般為路徑、可以是數(shù)組類型。
noParse: 排除對沒有采用模塊化的文件解析和處理，類似：jQuery。 類型：RegExp, [RegExp], function其中一個。
parser：可以更細(xì)粒度的配置哪些模塊語法【AMD、CommonJS、ES6等】是否需要解析

Plugin 是用來擴(kuò)展Webpack 功能的，通過在構(gòu)建流程里注入鉤子實現(xiàn)，它為Webpack 帶
來了很大的靈活性。主要在打包的某個階段執(zhí)行該插件，對文件進(jìn)行處理，類似于鉤子函數(shù)

觸發(fā)treeshking條件:
1.需要代碼是es module規(guī)范的并且使用解構(gòu)賦值的方式引入，
2.開啟optimization.usedExports：true來標(biāo)記使用和未使用的模塊，

使用壓縮的插件進(jìn)行刪除未使用代碼。

webpack4的mode設(shè)置為production，默認(rèn)開啟optimization.usedExports和使用代碼壓縮

注：
1、tree shaking 不能作用于有副作用side-effect的代碼
如果所有代碼沒有副作用，在package.json 中添加

 sideEffects: false

如果存在副作用代碼/模塊，

sideEffects: [
".src/some-side-effectful-file.js",
"*.css"
]

"side effect(副作用)" 的定義是，在導(dǎo)入時會執(zhí)行特殊行為的代碼，而不是僅僅暴露一個 export 或多個 export。舉例說明，例如 polyfill，它影響全局作用域，并且通常不提供 export。

2、不要意外地將 ES 模塊編譯成 CommonJS 模塊。如果你使用 Babel 的時候，采用了 babel-preset-env 或者 babel-preset-es2015，請檢查這些預(yù)置的設(shè)置。默認(rèn)情況下，它們會將 ES 的導(dǎo)入和導(dǎo)出轉(zhuǎn)換為 CommonJS 的 require 和 module.exports，可以通過設(shè)置.babelrc中 { modules: false } 選項來禁用它

參考：webpack tree shaking 的三個要點

devServer: {
proxy: {
"/api": {
target: "http://localhost:3000",
pathRewrite: {"^/api" : ""}
},
context: ["/api", "/online"], //匹配多個路徑，同時代理到同一個站點
target: "http://localhost:3000"
},
    hot: true,
    hotOnly: true
}

把代碼分離到不同的 bundle 中，可以按需加載或并行加載這些文件

實現(xiàn)方式：
1、入口配置：entry 入口使用多個入口文件 =》 存在重復(fù)引用的模塊
2、抽取公有代碼：使用 SplitChunksPlugin 抽取公有代碼，取代CommonsChunkplugin

 webpack.config.js 配置：
```

  optimizition: {
    splitChunks: {
        chunks: "all"        
    }
 }
```

3、動態(tài)加載 ：動態(tài)加載一些代碼 =》 ECMAScript 提案 的 import() 語法
方式1 + 方式2 需要配合使用，才能達(dá)到代碼抽離的效果

prefetch(預(yù)取)：將來某些導(dǎo)航下可能需要的資源
preload(預(yù)加載)：當(dāng)前導(dǎo)航下可能需要資源

import(/* webpackPrefetch: true */ "LoginModel");

/ webpackPrefetch: true /：把主加載流程加載完畢，在空閑時在加載其他，等再點擊其他時，只需要從緩存中讀取即可，性能更好。推薦使用，提高代碼利用率。把一些交互后才能用到的代碼寫到異步組件里，通過懶加載的形式，去把這塊的代碼邏輯加載進(jìn)來，性能提升，頁面訪問速度更快。
/ webpackPreload: true /: 和主加載流程一起并行加載。

import() 異步加載加載的模塊，開啟代碼分割后，會被多帶帶打包在一個文件中
路由懶加載

const Login = () => import("./components/login")

模塊異步加載

 import(/* webpackChunkName: "vendor"*/ "./page/vendor.js").then(({default: _}) => {// todo})

mini-css-extract-plugin 用于提取公共css，取代 webpack 3 的 extract-text-webpack-plugin
注：一般適用于生產(chǎn)環(huán)境，在開發(fā)環(huán)境會導(dǎo)致HMR功能缺失；在開發(fā)環(huán)境，使用style-loader
使用方式：

const MiniCssExtractPlugin=require("mini-css-extract-plugin")
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 代碼壓縮
// modules 中
// css,scss,sass,less
{
test:/.(sa|sc|c)ss$/,
use: [
process.env.NODE_ENV === "development" ? "style-loader": MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
optimization: {
minimizer: [new OptimizeCssAssetsPlugin({})]
},


//plugins中
new MiniCssExtractPlugin({
filename: "[name].css"
})

防止第三方包多次編譯打包。 第一次打包時，把第三方模塊多帶帶打包生成一個文件 vendors.dll.js，之后在打包時就可以直接從 vendors.dll.js 中引入之前打包好的第三方模塊
實現(xiàn)過程：
1、編寫一個用于生成動態(tài)鏈接庫的配置文件
2、運行生成動態(tài)鏈接庫和對應(yīng)的.mainfest.json映射文件
3、在webpack.config.js中使用動態(tài)鏈接庫。這樣第二次編譯打包會從json文件中找相應(yīng)的模塊

webpack.dll.config.js

module.exports = {
    entry: {
        react: ["react"] //react模塊打包到一個動態(tài)連接庫
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].dll.js", //輸出動態(tài)連接庫的文件名稱
        library: "_dll_[name]" //全局變量名稱
    },
    plugins: [
        new webpack.DllPlugin({
            name: "_dll_[name]", //和output.library中一致，值就是輸出的manifest.json中的 name值
            path: path.join(__dirname, "dist", "[name].manifest.json")
        })
    ]
}

webpack.config.js

plugins: [
  new webpack.DllReferencePlugin({
  manifest: require(path.join(__dirname, "dist", "react.manifest.json")),
})
],

提高webpack的構(gòu)建（打包/build）速度

多入口情況下，使用SplitChunk來提取公共代碼

通過externals配置來提取常用庫

利用DllPlugin和DllReferencePlugin預(yù)編譯資源模塊 通過DllPlugin來對那些我們引用但是絕對不會修改的npm包來進(jìn)行預(yù)編譯，再通過DllReferencePlugin將預(yù)編譯的模塊加載進(jìn)來。

使用Happypack 實現(xiàn)多線程加速編譯

使用webpack-uglify-parallel來提升uglifyPlugin的壓縮速度。 原理上webpack-uglify-parallel采用了多核并行壓縮來提升壓縮速度

使用Tree-shaking和Scope Hoisting來剔除多余代碼

webpack 作為模塊化打包工具， 常用來對項目進(jìn)行打包進(jìn)行本地調(diào)試和發(fā)布到線上，所以無論是自己在項目配置使用webpack還是使用開發(fā)框架的腳手架進(jìn)行開發(fā)，都需要區(qū)分開發(fā)和生產(chǎn)環(huán)境。在webpack4 的配置項中添加了 mode屬性，可以用來區(qū)分兩者模式。
下面是開發(fā)和生產(chǎn)模式下一些默認(rèn)配置和區(qū)別：

development 模式下，默認(rèn)開啟了NamedChunksPlugin 和NamedModulesPlugin方便調(diào)試，提供了更完整的錯誤信息，更快的重新編譯的速度。
production 模式下，由于提供了splitChunks和minimize，代碼就會自動分割、壓縮、優(yōu)化，同時 webpack 也會自動幫你 Scope hoisting 和 Tree-shaking

使用 webpack-bundle-analyzer， 可直觀的看出打包后每個模塊所占比例和大小
使用方法：

安裝
npm i -D webpack-bundle-analyzer

2.在 package.json -> script 中添加啟動命令
"analyz": "cross-env NODE_ENV=prodution npm_config_report=true npm run build"

3.在 webpack.pro.conf.js -> plugin 添加以下代碼，可以改變啟動時的端口等配置
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
new BundleAnalyzerPlugin({analyzerPort: 8089})

關(guān)于使用方法詳細(xì)可參考：webpack實踐-webpack-bundle-analyzer使用

import xxxx from "@componets/xxx" => const xxx = () => require("@componets/xxx")

對于一些類似antd、element-ui、eCharts等庫，可以按需引入，沒有必要全局引入，具體方法見官方文檔
對于loadash等API依賴工具，結(jié)合lodash-webpack-plugin和babel-plugin-lodash，實現(xiàn)按需引入，把需要的API一次性引入，并掛載在全局上

// 從lodash 中統(tǒng)一引入你需要的方法
import _ from "lodash"

export default {
cloneDeep: _.cloneDeep,
debounce: _.debounce,
throttle: _.throttle,
size: _.size,
pick: _.pick,
isEmpty: _.isEmpty
}

// 注入到全局
import _ from "@helper/lodash.js"
Vue.prototype.$_ = _

// vue 組件內(nèi)運用
this.$_.debounce()

對于類似Jquery等大而使用較少的庫，可以在index.html使用cdn引入；如果顧慮到可能造成外部攻擊等問題，可以下載成為本地資源，再引入

參考：webpack 打包優(yōu)化之體積篇

1、縮小文件搜索范圍或者指定特定的文件夾位置
2、排除不需要進(jìn)行處理的文件
......

不使用默認(rèn)的 UglifyJs，使用并行壓縮工具 webpack-parallel-uglify-plugin
......

具體參考：webpack 打包優(yōu)化之速度篇

我是在我之前開發(fā)一大型項目使用webpack進(jìn)行項目優(yōu)化
注：此項目使用的webpack版本為2.x,不是最新版本4.x，由于項目比較復(fù)雜，升級帶來的潛在問題可能比較多，時間精力有限，暫時未升級
項目技術(shù)和庫：vue全家桶 + vue-cli + webpack + jQuery + element-UI + eCharts ...
按照上文中的常用配置，就打包速度和體積進(jìn)行了優(yōu)化，從而導(dǎo)致頁面加載速度得到一定提升
圖片上傳失敗，顯示不出來 【手動捂臉】

由于本文參考了許多相關(guān)文章，并加以自己的理解和實戰(zhàn)，如有不妥之處，請多包涵并指出，謝謝

參考：
webpack實踐——webpack-bundle-analyzer 的使用
從基礎(chǔ)到實戰(zhàn) 手摸手帶你掌握新版Webpack4.0詳解 教你看文檔
webpack 4.0 基礎(chǔ)到實戰(zhàn)配置github
webpack 官方文檔
關(guān)于webpack的面試題總結(jié)