删除webpack文件加载器的部分路径
我正在设置Webpack 3，目前正在配置静态图像的资产管理，我想将其从src文件夹复制到dist文件夹。我想保留我的/img文件夹的文件结构，因为它复制到dist文件夹，但我遇到的问题是我试图删除路径占位符的一部分。我想要实现的目标有可能实现吗？
我的规则如下：
{
test: /\.(png|jpe?g|gif|ico)$/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]?[hash]',
//outputPath: 'img/'
}
}]
}，它通过上下文从我的入口点文件中抓取图像：
require.context('./img/', true, /\.(png|jpe?g|gif|ico)$/);但是，当文件被复制过来时，因为我将路径占位符作为名称的一部分，所以文件将类似于/src/img/[name].[extension]?[hash]。我希望保持路径的其余部分完好无损，因为一些图像有像/src/img/favicons/[name].[extension]?[hash]这样的路径，我觉得dist文件夹应该保持这种结构。从代码中可以看到，我曾尝试使用outputPath，但这只是将文件设置为/img/src/img/[name].extension?[hash]。我也尝试过使用publicPath设置，但似乎没有任何效果。最终目标是让上面提到的两个文件在此路径中不包含文件名的/src部分。
回答 4
Stack Overflow用户
发布于 2018-06-10 08:44:16
上下文选项就是您要查找的内容，在您的示例中：
{
test: /\.(png|jpe?g|gif|ico)$/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]?[hash]',
context: 'src'
}
}]
}Stack Overflow用户
发布于 2018-01-25 16:06:52
以防你没有自己解决这个问题:有一个useRelativePath选项，它允许保留相对路径。此外，如果您不希望在outputPath中包含像../这样的内容，则可以在其中使用回调来更改它返回的内容。
在这两件事上的医生：
Stack Overflow用户
发布于 2019-02-03 21:05:54
使用webpack 4，您可以输出到自定义目录，在本例中为父文件夹目录，如下所示：
{
test: /\.(png|jpe?g|gif|ico)$/,
exclude: [/some-folder/],
use: {
loader: "file-loader",
options: {
name: `[path][name].[ext]`,
// Output into parent folder's directory
outputPath: url => url.slice(url.indexOf(`/`) + 1)
}
}
}输出路径按该顺序将url, resourcePath, context作为参数。
https://stackoverflow.com/questions/47906746
复制相似问题