webpack打包生产环境，复制文件的配置管理（如public)

一个 web端 和 桌面端 公用的工程，某些文件不需要或者无法用 wekpack 压缩，放入 /public/ 文件夹（ Vue 工程），而该文件夹不会经过处理，直接复制到生产目录。

控制生产包的体积：根据运行环境( web || 桌面 ），甚至 客户端 版本，消减 客户端 体积。
比如 /public/ 中有 桌面端 才需要的 dll ，但是 web端 也会打包生成出来。

vue-cli 包装了 webpack ，文件打包必然是跟它有关系。 审查 webpack 的配置：

在 outputjs 内搜索 public ，找到最可能相关的一项 CopyPlugin

查阅该插件文档确认它正是我要找的

查阅配置项，发现 ignore 属性可以控制不去复制哪些资源到目的地
打开 vueconfigjs 文件，这可以自定义打包配置

首先为了更自由，选择高级一些的 chainWebpack 来改配置

更细腻的控制请翻阅插件主页 CopyWebpackPlugin

如需控制打包中某些文件的直接复制过程，可以通过配置 webpack 的 CopyWebpackPlugin 来达到目的。

或者在 vueconfig里面可以使用 chainWebpack链式配置方式去配置
关于chainWebpack与configureWebpack 可以看我之前写的文章， 传送门

运行打包命令之后就会打开一个可视化页面。如下图

左侧有个侧边栏显示打包的依赖，可以看到打包后每个chunk的大小。以及开启gzip压缩后大小比较等

从图中我们可以看到md5js这个依赖被打包在了三个模块里面，左侧搜索输入md5，右边会跟着变红色。

根据各方的查找说解决这个重复打包的问题只需要 配置一个路径别名。就会强制引入同一个路径的文件，按道理来说也是这样。

可是最终却怎么也不行，就算配置了路径别名还是重复打包了依赖。怎么也想不明白。最后打开npm关于md5js这个插件，如下图：

可以发现他这个插件的引入方式只支持 CommonJS 引入方式，并不支持es6 module 的引入方式。提到这个就要提提 CommonJS跟ES6 module的模块化的区别了
CommonJs 和 ES6 Module 的区别

所以可以发现 CommonJs导出的是变量的一份拷贝。这就知道为什么我们配置了路径别名还是会重复打包了，哪里有引入他就会拷贝一份。所以哪里用到了就会打包多少份。

那怎么办难道没办法了吗？
天无绝人之路，此时其实可以使用 dll打包方式，将他打包到一个dlljs里面。因为md5这个库是不怎么变化的。而且都是公用的。

如下是dll打包配置

可以看到我们已经将md5也一起打包进dll里面了。

我们来看看打包分析工具生成的视图

解决依赖重复打包的问题有三种方式

1配置路径别名，强制使用统一路径(前提是这个依赖必须支持es6 module引入方式。不然也只是拷贝)

第三种cdn方式后面我会专门写一篇文章来介绍
文章传送门

使用babel-minify-webpack-plugin插件可以帮助减少json文件的体积。安装插件之后，在webpack配置文件中添加如下内容plugins: [newBabiliMinifyPlugin()
]这样就可以有效地减少json文件的体积，从而提高构建性能和减少服务器空间消耗。

webpack-dev-middleware与webpack-hot-middleware用于本地开发
[webpack-dev-middleware]( >