file-loader image full path

Question

How can I use the file-loader to save full images paths?

my loader 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

On production I get dist/images/1.jpg and dist/images/2.jpg

I tried to change to use: [ 'file-loader?name=[path][name].[ext] ]

But got on production dist/src/images/1.jpg and dist/src/images/section/2.jpg

How do I change my loader setting to get on production dist/images/1.jpg and dist/images/section/2.jpg ?

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

Thanks

maybe publicPath will help https://webpack.js.org/guides/public-path/ — proti, Sep 17 '17 at 18:48

score 1 · Accepted Answer · answered Sep 17 '17 at 23:20

The [path] placeholder is the path relative to the context. By default that is the root of your project, more specifically the directory where you run webpack from, unless you've configured the context option.

The file-loader itself also accepts a context option, which allows to you change that behaviour just for the given rule. In your case you would set it to src.

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

file-loader image full path

1 Answers1