copy-webpack-plugin

一、copy-webpack-plugin 介绍

插件copy-webpack-plugin是用来复制文件的。在我们使用Webpack的时候，有一些本地资源，例如图片和音视频，在打包过程中没有任何模块使用到它们，但我们却想要把它们放在打包后的资源输出目录。预处理器loader是不适合做这种事情的，这个时候需要使用插件，copy-webpack-plugin这个插件就可以帮助我们完成这个事情。

配套代码是github仓库 https://github.com/jruit/webpack-tutorial 的webpack4-2例子

二、安装 copy-webpack-plugin

我们安装Webpack以及插件copy-webpack-plugin

  npm install --save-dev webpack@4.46.0  webpack-cli@3.3.12    

  npm install --save-dev copy-webpack-plugin@6.4.1 

需要特别注意的是，不同版本的Webpack使用的copy-webpack-plugin版本是不一样的，因为copy-webpack-plugin使用的Webpack的API不一样。另外不同版本的copy-webpack-plugin的配置也有一些差别，这里要确保使用了与上方相同版本的npm包。

三、使用 copy-webpack-plugin

webpack.config.js

  var path = require('path');
  var CopyPlugin = require("copy-webpack-plugin");

  module.exports = {
    entry: './a.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    plugins:[
     new CopyPlugin({
       patterns: [
         { from: path.resolve(__dirname, 'src/img/'), to: path.resolve(__dirname, 'dist/image/') },
       ],
     }),
    ],
    mode: 'none'
  };

在Webpack配置文件里，我们先require("copy-webpack-plugin")引入了copy-webpack-plugin，后续我们在plugins配置项里配置了该插件。

我们在目录'…src/img/''下放了一张图片，执行npx webpack后观察。我们发现该图片被复制到'…dist/image/'下了。

插件copy-webpack-plugin在使用的时候需要传入参数，该参数是一个对象。使用该插件进行复制，最重要的是要告诉它，需要从那个文件夹复制内容，以及要复制到的目标文件目录。

参数对象的patterns属性就是来设置从哪儿复制以及复制到哪儿的。该属性是一个数组，数组每一项是一个对象，对象的from属性就是从哪儿复制，to属性就是复制到什么地方。观察上面的Webpack配置，很容易理解。

如果要从多个文件目录复制内容，就在patterns数组里设置多个对象即可。

该插件还支持其它参数来做自定义复制，具体可以参阅其文档https://github.com/webpack-contrib/copy-webpack-plugin。