使用复制Webpack插件复制文件

Question

我正在使用webpack将文件从/src/libs/**复制到/dist目录，我的copyWebpack插件配置是

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

但它会在 dist 中生成一个额外的 src 文件夹。我希望我的目标文件夹会/dist/copy-files但它/dist/src/copy-files.有什么解决办法吗？

Answer 1

你必须

区分context和from。

• context 是源文件的根路径，不会添加到目标路径中。
• from ：但是，由from glob确定的路径将被添加到目标路径中。

所以在你的情况下，试试

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

相反。

Answer 2

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

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

from路径也不需要是绝对的。它不会改变结果，但仍然可能更干净一些。

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

Answer 3

对于任何遇到此问题并且没有发现上述内容按预期工作的谷歌同事，最终对我有用的是以下内容(在 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文件夹中的图像。

Answer 4

如果要

复制多个文件夹，可以这样完成：

.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的解决方案