Webpack 打包第三方代碼庫

共四篇文章都是在總結 Webpack。其中，[譯]爲何要 Webpack 寫了使用 Webpack 的動機和它的顯著特徵。其他三篇，主要是圍繞怎麼解決 Webpack 構建出來的文件太大展開，分別是：

Webpack 構建後文件變得很大？引入問題和解決問題的四個方面，而且介紹按需加載的細節
Webpack 提取公共模塊 介紹怎麼提取公共模塊
本篇則是總結使用 Webpack 打包第三方代碼庫
代碼壓縮使用了 UglifyJSPlugin，只是在第二篇一筆代過，這個插件基於 UglifyJS，有許多配置，但我通常都使用默認項，因此不單獨寫，使用方面可看這篇。

寫完這篇就結束本次的 Webpack 總結。

對於極少變更的框架代碼，例如 jQuery 或 ReactJs 等，應該怎麼打包？

使用 CommonsChunkPlugin，設置 minChunks 爲 Infinity 可用於打包此類代碼，但缺點也是比較明顯的：

• 每次執行 webpack 時，都會去解析打包這些代碼，耗時也耗資源

• 若是設置了文件名 hash，一次構建生成一個新的hash，那這些文件即便沒有變，文件名也會變，不利於緩存。

對於這些代碼我是用 Dll 插件單獨構建。這篇介紹 Dll 打包方法。

完整的構建過程

webpack 除了打包應用的 JS 外，還能夠用來打包一個類庫，涉及到 webpack config object 的 output.library, output.libraryTarget。Dll 打包結合這兩個屬性。
假設項目中使用了 ReactJs，Redux 等等，使用項目完整過程變成以下圖：

可見，框架代碼 React 與項目源碼的構建是分離的。

webpack.config.js:

webpack.dll.js

DllPlugin 和 DllReferencePlugin

用到了兩個插件，DllPlugin 和 DllReferencePlugin。DllPlugin 用於打包框架代碼 React，而 DllReferencePlugin 用於引入 DllPlugin 生成的代碼，供咱們的項目使用。
DllPlugin 的配置項只有三個，具體含義見截圖裏的註釋
DllReference 的配置項較多，但最重要的是配置 manifest，其它的使用默認的就能夠，這樣不容易出錯。不過也能夠理解一下各配置項的含義

1. context 和 DllPlugin 同樣

2. scope 是設置一個引用的前綴，例如若是設置了 ‘frame’，那麼項目代碼中 require('frame/react') 就會找 dll 裏查找 react 模塊

3. name 和 DllPlugin 同樣，默認是 manifest 裏的 name 屬性

4. sourceType 是指定這個 Dll 包遵照什麼規範，umd，amd，或 var，默認是 var， 便是經過 script 標籤引入到文檔裏，這個要跟 webpack.dll.js 裏的 output.libraryTarget 保持一致。