webpack 解决依赖,重复打包的问题
或者在 vue.config里面可以使用 chainWebpack链式配置方式去配置
关于chainWebpack与configureWebpack 可以看我之前写的文章， 传送门
运行打包命令之后就会打开一个可视化页面。如下图
左侧有个侧边栏显示打包的依赖，可以看到打包后每个chunk的大小。以及开启gzip压缩后大小比较等
从图中我们可以看到md5.js这个依赖被打包在了三个模块里面，左侧搜索输入md5，右边会跟着变红色。
根据各方的查找说解决这个重复打包的问题只需要 配置一个路径别名。就会强制引入同一个路径的文件，按道理来说也是这样。
可是最终却怎么也不行，就算配置了路径别名还是重复打包了依赖。怎么也想不明白。最后打开npm关于md5.js这个插件，如下图：
可以发现他这个插件的引入方式只支持 CommonJS 引入方式，并不支持es6 module 的引入方式。提到这个就要提提 CommonJS跟ES6 module的模块化的区别了
CommonJs 和 ES6 Module 的区别
所以可以发现 CommonJs导出的是变量的一份拷贝。这就知道为什么我们配置了路径别名还是会重复打包了，哪里有引入他就会拷贝一份。所以哪里用到了就会打包多少份。
那怎么办?难道没办法了吗？
天无绝人之路，此时其实可以使用 dll打包方式，将他打包到一个dll.js里面。因为md5这个库是不怎么变化的。而且都是公用的。
如下是dll打包配置
可以看到我们已经将md5也一起打包进dll里面了。
我们来看看打包分析工具生成的视图
解决依赖重复打包的问题有三种方式
1.配置路径别名，强制使用统一路径(前提是这个依赖必须支持es6 module引入方式。不然也只是拷贝)
第三种cdn方式后面我会专门写一篇文章来介绍
文章传送门
