[v1.1.7] options.outputPath {Function} is appended to the original URL

[michael-ciniawsky]

Prior to this release, providing an outputPath function would see an argument passed in to it of the current URL of the file. We were using a name like: "[path][name]-[hash].[ext]", and we'd see an argument like "client/fonts/font-icons/icons-123456789.svg" given to the function. The return value of that outputPath function would end up being where the file would be emitted -- the function basically acted like a way to transform the file path. So, for instance, I would use it to just organize some things, e.g.

if (url.startsWith("client/") return url.replace("client/", "assets/");

So, instead of my file being output and served up with a URL of "site.com/client/fonts/font-icons/icons-123456789.svg", it would instead be "site.com/assets/fonts/font-icons/icons-123456789.svg". I was using this to basically help organize the output of some assets for in-house vs. vendor vs. other based on the path prefix I was getting.

With this latest change however (due to the removed "else if" conditional on line 47 of the previous version of the file), the URL gets appended to the result of the output path function (see the change on line 47 of the current version, outputPath += url). Before, in the "else if" that would handle outputPath being present, the url itself was being replaced by the result of the output path (previous version line 51, url = outputPath).

Now, the emitted path ends up being like "assets/fonts/font-icons/icons-123456789.svgclient/fonts/font-icons/icons-123456789.svg", and the re-written URL ends up trying to serve it up at "site.com/client/fonts/font-icons/icons-123456789.svg".

[alexander-akait]

@michael-ciniawsky can you provide failing test? Difficult to understand 😄

[thasmo]

@evilebottnawi, an example.

fonts.scss

@font-face {
    src: url('../fonts/font.woff');
}

webpack.config.js

test: /\.woff$/,
loader: 'file-loader',
options:  {
    name: '[name].[ext]',
    outputPath: 'fonts/',
}

correct bundle.css with 1.1.6

@font-face {
  src: url(/static/fonts/font.woff);
}

wrong bundle.css with 1.1.7

@font-face {
  src: url(/static/font.woff);
}

[alexander-akait]

@thasmo hm, only if publicPath not set, we should set url as outputPath + url. Seems it is normal, in near future wait patch release.

[RemyLespagnol]

Same error too, glad to see the patch soon :)

[Android3000]

@evilebottnawi @michael-ciniawsky This is fantastic, thank you so much! Sorry if the initial example was a bit unclear. I just checked out 1.1.8 and all is well again!

[RemyLespagnol]

Hi @michael-ciniawsky @evilebottnawi,

My app have the 1.1.9 version, and I have the same bug than the 1.1.7 version.
My config is :

file: {
      test: /\.(png|jpg|ico|gif|svg|eot|eot|otf|ttf|woff|woff2)$/i,
      loader: 'file-loader',
      options: {
        publicPath: `${process.env.ROOT_URL || ''}/assets/`,
        // output path is relative to the JS bundle folder
        outputPath: 'packed/',
     },
},

Before my assets had the url : servername/assets/packed/123556456461...png
Now I have servername/assets/1231231231215...png

[alexander-akait]

@Themandunord all right, you use bug when output and public is concatenating, use publicPath only when you should change public path

[RemyLespagnol]

@evilebottnawi

Ok but with this config :

file: {
      test: /\.(png|jpg|ico|gif|svg|eot|eot|otf|ttf|woff|woff2)$/i,
      loader: 'file-loader',
      options: {
        outputPath: 'packed/',
     },
},

My images have : servername/assets/packed/123556456461...png
But my fonts (from Material-UI & custom) have servername/assets/1231231231215...png

Do you see the problem ? I missed something ?

EDIT: My images is require like this const francePicture = require('assets/img/fr-FR.png');
And my fonts:

@font-face {
    font-family: 'Soho Gothic Pro';
    src: url('../../fonts/soho_gothic_pro/SohoGothicPro-LightItalic.eot');
    src: url('../../fonts/soho_gothic_pro/SohoGothicPro-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../../fonts/soho_gothic_pro/SohoGothicPro-LightItalic.woff') format('woff'),
        url('../../fonts/soho_gothic_pro/SohoGothicPro-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

[alexander-akait]

@Themandunord try to remove outputPath and check you file-loader version in node_modules

[RemyLespagnol]

@evilebottnawi Thank ! It works :)

[RemyLespagnol]

@evilebottnawi Hum... I don't understand very well finally.
I have :

file: {
      test: /\.(png|jpg|ico|gif|svg|eot|eot|otf|ttf|woff|woff2)$/i,
      loader: 'file-loader',
      options: {
        publicPath: `${process.env.ROOT_URL || ''}/assets/`,
      },
    },

And all my assets are put in the /assets folder like that :

Event if i put :

publicPath: \`${process.env.ROOT_URL || ''}/assets/packed`

What I don't understand ?

I don't want the file in the assets folder, because I can't add them to the .gitignore...