webpack 打包第三方庫_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，其它的使用預設的就可以，這樣不容易出錯。不過也可以了解一下各配置項的含義

context 和 DllPlugin 一樣

scope 是設定一個引用的字首，例如如果設定了 ‘frame’，那麼項目代碼中 require('frame/react') 就會找 dll 裡查找 react 子產品

name 和 DllPlugin 一樣，預設是 manifest 裡的 name 屬性

sourceType 是指定這個 Dll 包遵守什麼規範，umd，amd，或 var，預設是 var， 即是通過 script 标簽引入到文檔裡，這個要跟 webpack.dll.js 裡的 output.libraryTarget 保持一緻。