如何使用带有webpack的文件加载器来保留文件夹结构，但跳过“ src”？

Question

我在Webpack 4中使用文件加载器，并且将某些资源原样复制到/dist文件夹中。通过提供

name: "[path][name].[ext]"

作为参数，但这会保留整个文件夹结构（在我的情况下，还包括src/部分）。我的目标是复制文件的确切路径，但是使用src/作为根目录，是否有人有这样做的经验？

Answer 1

Webpack file-loader接受name property的功能。您可以使用它来返回自定义的计算路径。

{
    test: /\.(png|jpg|gif)$/,
    use: [{
        loader: 'file-loader',
        options: {
            name(file) {

                // generate path dynamically here
                const newPath = '[hash].[ext]';

                return newPath;
            },
        },
    }],
}

此外，如果您真的只需要将资产从src复制到dist，那么可能webpack-copy-plugin是一种更好的处理方式。