背景
一个web端和桌面端公用的工程，某些文件不需要或者无法用wekpack压缩，放入/public/文件夹（Vue工程），而该文件夹不会经过处理，直接复制到生产目录。
需求
控制生产包的体积：根据运行环境(web || 桌面），甚至客户端版本，消减客户端体积。
比如/public/中有桌面端才需要的.dll，但是web端也会打包生成出来。
解决
vue-cli包装了webpack，文件打包必然是跟它有关系。审查webpack的配置：
vue inspect > output.js
在output.js内搜索 public，找到最可能相关的一项 CopyPlugin
// output.js
/* config.plugin('copy') */
new CopyPlugin(
[
{
from: 'C:\\project\\项目地址\\public',
to: 'C:\\project\\项目地址\\dist',
toType: 'dir',
ignore: [
'.DS_Store',
{
glob: 'index.html',
matchBase: false
},
{
glob: 'index.html',
matchBase: false
},
{
glob: 'index.html',
matchBase: false
}
]
}
]
),
查阅该插件文档确认它正是我要找的
介绍.png
查阅配置项，发现ignore属性可以控制不去复制哪些资源到目的地
打开vue.config.js文件，这可以自定义打包配置
首先为了更自由，选择高级一些的 chainWebpack 来改配置
// vue.config.js
module.exports = {
......
chainWebpack: (config) => {
if (process.env.NODE_ENV === "production") {
config.plugin("copy").tap((args) => {
if (process.env.IS_ELECTRON) {
args[0][0].ignore.push("**/web端相关文件夹/**"); // 桌面环境不复制web端的文件
} else {
args[0][0].ignore.push("**/桌面端相关文件夹/**"); // web环境不复制桌面端的文件
}
return args;
});
}
},
......
}
更细腻的控制请翻阅插件主页 CopyWebpackPlugin
总结
如需控制打包中某些文件的直接复制过程，可以通过配置webpack的CopyWebpackPlugin来达到目的。
