最完整的webpack Dll打包與採坑總結

webpack已經成爲前端主流的項目打包工具，對於前端開發必不可少。在前端項目依賴第三方庫過多，項目比較大文件比較多時，webpack打包的速度也會被拖成蝸牛，是時候優化一下webapck的打包速度了。在優化打包速度方面有不少方法方式，其中一個比較重要的方式是DllPlugin。DllPlugin把第三方庫打包成動態鏈接庫（動態鏈接庫：windows系統中庫文件概念，這裏是借用了這一概念。），DllPlugin 將不頻繁更新的庫進行編譯，當這些依賴的庫的版本沒有變化時，就不需要重新編譯。如果更新了依賴的第三方庫，那麼只需要執行一次Dll打包就可以了。接下來就介紹一下這種打包方式以及在vue-cli3中遇到的坑。

一、DllPlugin與DllReferencePlugin基本用法

DllPlugin 和 DllReferencePlugin 可以實現拆分 bundles，而且可以大大提升構建速度，DllPlugin 和 DllReferencePlugin 都是 webpack 的內置模塊。

1、準備

      a、在項目中安裝webapck-cli

npm install --save-dev webpack-cli

     b、新建webapck.dll.config.js，用於編譯動態鏈接庫。

2、DllPlugin配置與參數解析

const webpack = require('we