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

背景

一个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来达到目的。