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

Question

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

我的装载机配置文件

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

图像路径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]占位符是相对于上下文的路径。默认情况下，它是你项目的根目录，更具体地说，是你运行 webpack 的目录，除非你已经配置了contextoption。

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

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