Question

我正在使用webpack将/ src / libs / **中的副本文件复制到/ dist目录，我的copyWebpackPlugin配置是

new copyWebpackPlugin([{
    from: __dirname + '/src/libs/**',
    to: __dirname + '/dist'
}])

但它会在dist中生成一个额外的src文件夹。我希望我的目标文件夹为/dist/copy-files，但它是/dist/src/copy-files。有没有解决方案？

Answer 1

如果您在to中使用绝对路径，则copy-webpack-plugin会将已解析的from添加到其中。
要获得所需内容，只需为目录命名即可。

new copyWebpackPlugin([{
    from: __dirname + '/src/libs/**',
    to: 'dist'
}])

from路径也不一定是绝对路径。它不会改变结果，但仍然可能更清洁。

new copyWebpackPlugin([{
    from: 'src/libs/**',
    to: 'dist'
}])

Answer 2

您必须区分context和from。

context是源文件的根路径，不会添加到目标路径。
from：由from全局决定的路径将被添加到目标路径。

因此，请尝试

new copyWebpackPlugin([{
    context: __dirname + '/src',
    from: 'libs/**',
    to: __dirname + '/dist'
}])

相反。

Answer 3

如果您要复制几个文件夹，可以这样进行：

.addPlugin(new CopyWebpackPlugin([
    // copies to {output}/static
    {
      from: './assets/adminlte', to: 'adminlte'
    }
]))

.addPlugin(new CopyWebpackPlugin([
    // copies to {output}/static
    {
        from: './assets/radical', to: 'radical'
    }
]))

这是我在symfony 4上的解决方案

Answer 4

对于遇到此问题但未按预期工作的所有Google同事，最终为我工作的是以下内容（在Wordpress项目中）：

// I have my development files in a "src" folder within the ./themes/THEMENAME folder
// I have my output / live files in a "dist" folder in the ./themes/THEMENAME folder

module.exports = {
    // ...other config
    output: {
        path: path.resolve(__dirname, "./wp-content/themes/THEMENAME/dist"),
        filename: "./js/[name].min.js"
    },
    plugins: [
        new CopyWebpackPlugin([{ 
            context: "./wp-content/themes/THEMENAME/src",
            from: "images/**/**"
            // I *did not* have to put a 'to' property here
        }])
    ]
}

上面的配置允许我将所有图像文件从./src/images复制到./dist/images。排序后，您可以使用ImageMinPlugin压缩dist文件夹中的图像。

使用copyWebpackPlugin复制文件

4 个答案: