webpack插件copy-webpack-plugin配置记

1. 公司项目源码中p100这个目录全部放的静态资源，用于iframe嵌入使用。
2. 静态资源中有一部分html文件是放到了运维部门独立维护，也就是说这些目录中的html文件需要支持生产直接覆盖生效。
3. 项目打包时会重新生成一遍静态资源，这会导致生产的最新静态资源会被覆盖。
4. 最后需求：需要在打包的时候忽略部分需要运维部门维护的静态资源目录。

先附结果配置:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
function resolve (dir) {
  return path.join(__dirname, dir)
}

webpack = {
  lintOnSave: process.env.NODE_ENV !== "production",
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // hot:true,
    proxy: null, // 设置代理
    before: app => {}
  },
  configureWebpack: config => {
    config.plugins.push(
        new CopyWebpackPlugin(
          [
            //平台相关
            {
              from: path.resolve(__dirname, './src/p100'),
              to: path.resolve(__dirname, './dist/p100')
            }
          ],
          //-------------- 划重点 start ----------------------
          {
            ignore: [
              'extend/**',
              'flow/html/print/**'
            ],
            copyUnmodified: true
          }
          //-------------- 划重点 end ----------------------
        )
    );
    if(process.env.NODE_ENV === 'production'){
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  },
  chainWebpack: config => {
    // 修复HMR
    config.resolve.symlinks(true);

  },
  css: {
    sourceMap: false, // 是否在构建样式地图，false将提高构建速度
    loaderOptions: {
      css: {
        localIdentName: "[name]-[hash]",
        camelCase: "only"
      },
      sass: {
        prependData: `@import "~@/assets/css/variables.scss";`
      }
    }
  }
}
if(process.env.NODE_ENV!='development'){
  webpack.outputDir = './dist/p100';
  webpack.publicPath  =  '/p100'
}

module.exports = webpack;

参考资料：
腾讯云webpack配置：https://cloud.tencent.com/developer/section/1477556
官方npmjs配置：https://www.npmjs.com/package/copy-webpack-plugin
特别鸣谢山海一哥：https://blog.csdn.net/qq_43702430/article/details/106187706