OutputPath is joined with publicPath?

[michaelmano]

I have set up file loader for fonts however its not working as I thought it would.
my output path is completely different from my public path so I thought by declaring the locations in parameters this would work. e.g.

{
  test: /\.(eot|svg|ttf|woff|woff2)$/,
  loader: 'file-loader?name=[name].[ext]&outputPath=fonts/&publicPath=__fonts/'
}

the SRC the css should be using is __fonts/name.ext and the files location should be in /fonts/name.ext

but this is not what is happening.
instead im getting
src: url(__fonts/fonts/font-name.ttf);

[ronar]

I've the same issue. When I point out the outputPath, the final file path gets concatenated with the public path. It shouldn't be happening.

const image = require('../images/image.png');

My config:

{
  test: /\.(png|jpe?g|gif|svg)$/,
  loader: 'file-loader?name=[hash].[ext]&outputPath=../assets/images/&publicPath=assets/images/'
}

I get this string http://{server}/assets/images/../assets/images/image.png. Which is definitely wrong.

[SachinVarghese]

I have the same issue. Am I not using it right? Can someone define the output Path and public Path keys?

[dirago]

Same error here, impossible to understand why

[dirago]

Waiting for the fix :

Instead of:

{
  test: /\.woff$|\.woff2?$|\.ttf$|\.eot$|\.otf$/,
    loader: 'file-loader',
    options: {
        name: '[name].[ext]',
        outputPath: 'public/fonts/',
        publicPath: '../fonts'
    },
},

What I did :

{
  test: /\.woff$|\.woff2?$|\.ttf$|\.eot$|\.otf$/,
    loader: 'file-loader',
    options: {
        name: 'public/fonts/[name].[ext]',
        publicPath: function(url) {
          return url.replace(/public/, '..')
        },
    },
},

It's kind of tricky, but it's actually works

[Coriou]

I also experience the same issue

[BennieCopeland]

Same issue, but this worked:
'file-loader?name=[name].[hash].[ext]&outputPath=fonts/&publicPath=../'

Directory structure is:

dist
- fonts
  - font-awesome.1234.woff
  - font-awesome.1234.eot
- css
  - styles.css

In my css, the path gets set to ../fonts/font-awesome.woff and the files are output to the fonts directory under dist.

[michaelmano]

so my issue was more that the url is different from the directory structure. Im lucky that the only difference was the 2 underscores.. If someone has a site where the url is completely different from the directory structure this would be a big issue as here is my fix
loader: 'file-loader?name=[name].[ext]&outputPath=lib/web/fonts/&publicPath=/__'
so that the public path is now site.com/__lib/web/fonts/

[Henryklchan]

Same error here, impossible to understand why too

[subramGrg]

i was having this same issue. however while scouring the internet i came across this:

Git commit

that entails:

outputPath: defines sub-dir relative to "dist" folder, in which all the image files whould be placed (if not specified all the image files will be placed directly in the "dist" folder)

publicPath: defines path which should be prefiex to outputPath inside the CSS files (if not specified it will default to "./dist" ... or whatever dir was specified in webpack "output" config)

What i dont understand is why isnt this on webpack's file-loader Git page? FYI: im still new to Github

[gurianov-p]

I have same error in 0.11.2, but version 0.10.0 works fine

[jimblue]

thanks @dirago your temporary solution works great. waiting for the fix too!

[nickhstr]

Same issue here. Downgraded to 0.10.1 and the issue is gone.

[ctrlaltdylan]

I wonder if this is related, but it seems that output.publicPath is not being respected by the file-loader.

I have an absolute path set on output.publicPath for localhost:8080/static. The bundle attempts to find the file-loaded assets at localhost:3000/static.

[Robindo]

I've been searching for a solution for a while. I couldn't get webpack to get the correct path to my images in my '*.css' file. The solution using "publicPath: function(url ..... " works great for me.
Thank you @dirago

My file structure is:

myProject/dev/
          |
          css/
          |---- base.scss
          |---- test.scss
          images/  
          |---- test.png
          js/
          |---- script.js

myProject/dist
          |
          css/
          |---- style.css
          images/
          |---- test.png
          js/
          |---- script.js

base.scss looking like this:

@import 'test';

test.scss looking like this:

.my-wrapper {
      .nested-div {
        background-image: url('../images/test.png');
        background-size: cover;
        .....
     }
}

My webpack.config.js is:

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        dist: [
            './dev/js/script.js'
        ]
    },
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: 'js/[name].js'
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader', 'sass-loader'],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                loaders: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]',
                            publicPath: function(url) {
                                return url.replace(/images/, './../images/');
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('css/[name].css')
    ]

I discovered both following solutions to my images path work:

solution with a publicPath function:

            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                loaders: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]',
                            publicPath: function(url) {
                                return url.replace(/images/, './../images/');
                            }
                        }
                    }
                ]
            }

solution with ouputPath and publicPath:

            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                loaders: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: './images/',
                            publicPath: './.'
                        }
                    }
                ]
            }

I hope this extra info is helpfull

[alexander-akait]

Done in #246

[SunXinFei]

@dirago thanX !!! resolve this issue!

[vladadementieva]

@dirago, thanks a lot!

[ErikGMatos]

@dirago Thank you very much, solved my problem.
vlw!!!

[jayhill90]

It's kind of tricky, but it's actually works

Worked great!