文件加载器图像完整路径

Question

如何使用文件加载器保存完整图像路径？

我的装载机cfg

test: /\.(png|jpe?g|gif|ico)$/, 
     use: [ 'file-loader?name=[name].[ext]&outputPath=images/'  ]

img path src/images/1.jpg and src/images/section/2.jpg

在制作中，我得到dist/images/1.jpg和dist/images/2.jpg

我尝试更改为use: [ 'file-loader?name=[path][name].[ext] ]

但是上了制作dist/src/images/1.jpg和dist/src/images/section/2.jpg

如何更改我的加载程序设置以开始制作dist/images/1.jpg和dist/images/section/2.jpg？

"file-loader": "^0.11.2"
"webpack": "^3.5.5"

由于

Answer 1

[path] placeholder是相对于上下文的路径。默认情况下，这是项目的根目录，更具体地说是运行webpack的目录，除非您已配置context option。

file-loader本身也接受context option，它允许您仅针对给定规则更改该行为。在您的情况下，您可以将其设置为src。

{
  test: /\.(png|jpe?g|gif|ico)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
        context: 'src'
      }
    }
  ]
}