背景

一個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來達到目的。