javascript - 文件加载器图像完整路径

Question

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

我的加载器配置

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

img路径src/images/1.jpg和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 .

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

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