webpack的copy-webpack-plugin插件

webpack的copy-webpack-plugin插件的作用是將項目中的某單個文件或整個文件夾在打包的時候復制一份到打包后的文件夾中（即復制一份到dist目錄下）。

效果如下圖所示：

使用方法：

給項目中添加copy-webpack-plugin插件：

yarn add copy-webpack-plugin@5.1.2 --save

然后webpack.dev.js文件配置如下：

const  CopyPlugin = require("copy-webpack-plugin");

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        BUILD_ENV: JSON.stringify(process.env.BUILD_ENV)
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // copy custom static assets
    new  CopyPlugin(
      [
        {
          from: path.resolve(__dirname, '../src/public/echarts.js'), to: path.resolve(__dirname, '../dist/static/js/echarts.js')
        },
        {
          from: path.resolve(__dirname, '../src/public/china.js'), to: path.resolve(__dirname, '../dist/static/js/china.js') } ] ),
  ],

webpack.prod.js文件配置如下：

const  CopyPlugin = require("copy-webpack-plugin");

plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
          BUILD_ENV: JSON.stringify(process.env.BUILD_ENV),
        }
      }),
      new CleanWebpackPlugin(['dist'], {
        root: path.resolve(),
      }),
      new MiniCssExtractPlugin({
        filename: 'static/css/[name]-[contenthash:8].css',
        chunkFilename: 'static/css/[name]-[contenthash:8].css',
      }),
      // copy custom static assets
      new  CopyPlugin(
        [
          {
            from: path.resolve(__dirname, '../src/public/echarts.js'), to: path.resolve(__dirname, '../dist/static/js/echarts.js')
          },
          {
            from: path.resolve(__dirname, '../src/public/china.js'), to: path.resolve(__dirname, '../dist/static/js/china.js') } ] ),
    ]

關於copy-webpack-plugin其他參數的配置可以查看copy-webpack-plugin