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方式后面我会专门写一篇文章来介绍

文章传送门

1、安装依赖包

初始化项目为nodejs项目

另一种是在html中通过img标签的src引入，因为webpack对html支持不友好，所以需要借助插件html-webpack-plugin

第三种是借用拷贝插件，直接强行拷贝所有图片，因为本项目图片是在xslt中引用，所以采用第三种和第一种结合的方式处理图片，在plugin参数中添加

如果css是与其余的css一起打包，那么其中对fonts资源的引用路径也会自动发生变化，一定注意，是个大坑！！

---