删除 webpack 文件加载器的部分路径
Remove part of path for webpack file loader
我正在设置 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)$/);
但是,当文件被复制过来时,因为我将 [path] 占位符作为名称的一部分,文件将类似于 /src/img/[name].[extension]?[hash]
。我想保持路径的其余部分完好无损,因为一些图像具有 /src/img/favicons/[name].[extension]?[hash]
之类的路径,我觉得 dist 文件夹应该保持这种结构。正如您在代码中看到的那样,我尝试使用 outputPath,但这只是将文件设置为 /img/src/img/[name].extension?[hash]
。我也尝试过使用 publicPath 设置,但它似乎根本没有任何效果。最终目标是让上述 2 个文件不包含此路径中文件名的 /src
部分。
以防万一您没有自己解决这个问题:有一个 useRelativePath
选项允许保留相对路径。此外,如果您不想要 ../
之类的内容,您可以在 outputPath 上使用回调来更改它 returns 的内容。
关于这两件事的文档:
您可以使用 context
选项删除部分路径:
...
query: {
context: path.join(__dirname, 'content'),
...
context 选项就是您要查找的内容,在您的情况下:
{
test: /\.(png|jpe?g|gif|ico)$/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]?[hash]',
context: 'src'
}
}]
}
使用 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
作为参数。
我正在设置 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)$/);
但是,当文件被复制过来时,因为我将 [path] 占位符作为名称的一部分,文件将类似于 /src/img/[name].[extension]?[hash]
。我想保持路径的其余部分完好无损,因为一些图像具有 /src/img/favicons/[name].[extension]?[hash]
之类的路径,我觉得 dist 文件夹应该保持这种结构。正如您在代码中看到的那样,我尝试使用 outputPath,但这只是将文件设置为 /img/src/img/[name].extension?[hash]
。我也尝试过使用 publicPath 设置,但它似乎根本没有任何效果。最终目标是让上述 2 个文件不包含此路径中文件名的 /src
部分。
以防万一您没有自己解决这个问题:有一个 useRelativePath
选项允许保留相对路径。此外,如果您不想要 ../
之类的内容,您可以在 outputPath 上使用回调来更改它 returns 的内容。
关于这两件事的文档:
您可以使用 context
选项删除部分路径:
...
query: {
context: path.join(__dirname, 'content'),
...
context 选项就是您要查找的内容,在您的情况下:
{
test: /\.(png|jpe?g|gif|ico)$/,
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]?[hash]',
context: 'src'
}
}]
}
使用 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
作为参数。