最完整的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