webpack配置CopyPlugin复制文件时连带src目录的问题如何解决

出现该问题的核心原因是copy-webpack-plugin的默认路径匹配规则：当from参数的路径包含父级目录（本次为src）且未指定匹配上下文时，插件会保留匹配文件相对于项目根目录的路径结构，因此会将src/xxx.html整体复制到output目录下，多出来一层src文件夹。

方案1：指定context参数（最推荐） #

通过context属性指定文件匹配的根目录为src，此时from的匹配路径相对于src计算，复制时就不会携带src层级，配置如下：

new CopyPlugin({
    patterns: [
        {
            context: "./src", // 匹配根目录设为src
            from: "*.html", // 匹配src下所有html文件
            to: path.resolve(__dirname, "output") // 优化：path.resolve推荐用多参数写法，兼容不同系统路径分隔符
        }
    ]
})

方案2：使用文件名占位符指定输出规则 #

如果不需要修改context，也可以在to参数中使用webpack内置的文件名占位符，直接指定输出文件直接放在output根目录：

new CopyPlugin({
    patterns: [
        {
            from: "./src/*.html",
            to: path.resolve(__dirname, "output/[name][ext]") // [name]对应原文件名，[ext]对应原文件后缀
        }
    ]
})

两种方案在copy-webpack-plugin所有主流版本中均兼容生效。

内容的提问来源于stack exchange，提问作者Teodor