Vue 项目之 Webpack 的 Plugins（3）

「这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战」

1. `CopyWebpackPlugin`

在 Vue 项目的打包过程中，如果我们将一些文件放到 public 目录下，那么这个目录下的文件会被复制到 dist 文件夹中。而这个复制的功能，我们可以使用 CopyWebpackPlugin 来完成。

先来安装 CopyWebpackPlugin 插件：

npm install -D copy-webpack-plugin

为了演示效果，我们可以把 Vue CLI 创建的项目中的 public 下的文件都拷贝到我们当前的项目中的 public 目录下（之前已经拷贝过 index.html 文件了，所以这次只需要把 favicon.ico 文件拷贝过来即可）。那么到时候这个 public 目录下的文件应该都是要打包到输出文件夹下的。那怎么打包进去呢？事实上，我们会把文件复制一份过去。但是，又有一个问题，public 下的 index.html 文件是模板文件，我们只是用它来生成最终的 index.html，因此不应该把它复制过去，也就是说需要排除它。

即我们希望实现的是：把项目目录下的 public 文件夹中的 favicon.ico 文件复制一份到最终打包输出的文件夹中。那么我们可以在 webpack 配置文件中这样配置：

...
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'js/bundle.js'
  },
  ...
  plugins: [
    ...
    new CopyWebpackPlugin({
      patterns: [ // patterns 中可以编写多个对象，对应多个匹配规则（比如想要复制多个文件夹中的文件就可以针对每个文件夹都编写匹配模式对象）
        {
          from: 'public', // 从哪个文件夹中复制文件
          to: './', // 复制到哪个文件夹下（默认是 output.path 对应的文件夹下，这里会对 output.path 的值和 to 的值做拼接），通常会省略这项，因为 webpack 会自动读取上下文中的 output.path 的值
          globOptions: {
            ignore: [ // 在 globOptions.ignore 对应的数组中配置要忽略的文件
              "**/index.html", // 忽略当前文件夹里面所有的 index.html，index.html 是模板文件（只是用来生成最终的 index.html 的），不需要进行复制
              "**/.DS_Store" // 如果是 macOS ，目录下会自动生成的一个文件，也需要忽略
            ]
          }
        }
      ]
    })
  ]
}

plugins 选项中的插件顺序没有要求，因为插件的执行是和它内部 hook 的回调有关，而与这边的编写顺序无关。

配置完成后，我们来运行 npm run build 命令打包，打包后效果如下：

可以看到，./public 目录下的 favicon.ico 就被复制到打包输出文件夹 ./build 下了。

以上，就是关于 CopyWebpackPlugin 插件的使用过程，其主要作用就是用来帮助我们做文件的拷贝的。

Vue 项目之 Webpack 的 Plugins（3）

1. CopyWebpackPlugin

1. `CopyWebpackPlugin`