我正在设置 Webpack 3,并且目前正在配置我想从 src 文件夹复制到 dist 文件夹的静态图像的 Assets 管理。我想保留我的 /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)$/);
但是,当文件被复制时,因为我将 [path] 占位符作为名称的一部分,所以文件将类似于
/src/img/[name].[extension]?[hash]
.我想保持路径的其余部分完好无损,因为某些图像的路径类似于 /src/img/favicons/[name].[extension]?[hash]
而且我觉得 dist 文件夹应该保持这种结构。正如您在代码中看到的那样,我尝试使用 outputPath 但这只是将文件设置为 /img/src/img/[name].extension?[hash]
.我也尝试过使用 publicPath 设置,但它似乎根本没有任何效果。最终目标是让上面提到的 2 个文件没有 /src
此路径中包含的文件名的一部分。
最佳答案
context 选项是您正在寻找的,在您的情况下:
{
test: /\.(png|jpe?g|gif|ico)$/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]?[hash]',
context: 'src'
}
}]
}
关于webpack - 删除 webpack 文件加载器的部分路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47906746/