0

Good evening,

Given an image/font file located at assets/images/myimg.png (or assets/fonts/myfont.woff).....

I want webpack's file-loader to create a hashed version in a different directory (../priv/static/fonts/myfont.woff)...

But I don't want that name to be part of the "served asset path for the file".

If I use file-loader with a name option that looks like this: "../priv/static/fonts/[name]-[hash].[ext]", the file ends up in the right place in my file system.

But when referenced from CSS, the full path that the browser is looking for is http://mysite.dev/priv/static/fonts/myfile-fee66e712a8a08eef5805a46892932ad.woff. My web server serves static files from priv/static, so I want the requested path to just look like http://mysite.dev/fonts/myfile-fee66e712a8a08eef5805a46892932ad.woff.

I am committing assets/images and assets/fonts to source control, so I don't want all of the hashed files to end up in that directory.

Any help you could provide would be appreciated!

Brandon
  • 3,091
  • 2
  • 34
  • 64
  • Can't you just assign a different path for your build that's going to your server, like `/fonts/[name]-[hash].[ext]`? – Doodlebot Mar 27 '17 at 13:40
  • @Doodlebot Do you mean configure my webserver to serve from a different directory? I feel like that shouldn't be required... ! – Brandon Mar 27 '17 at 14:39
  • I probably didn't fully understand the problem on the first read through. So is main issue is that server request path is `http://mysite.dev/fonts/file.woff`, but your css is still looking for `http://mysite.dev/priv/static/fonts/file.woff` and you want webpack to make the css use the server's path? – Doodlebot Mar 27 '17 at 15:01
  • @Doodlebot No problemo. The "public" folder my web framework (elixir/phoenix) provides is in the `priv/static` directory. I need to get built files into that directory - e.g. I need to get the hashed font file to `priv/static/fonts/file-[HASH].woff`. However when other files reference this asset, it needs to be relative to the public dir - i.e. other references should be to `/fonts/file-[HASH].woff`. I can get the file in the right place using the `name` option in `file-loader`, but I can't strip the `/priv/static` prefix from the path when other resources request this file. – Brandon Mar 27 '17 at 15:08

1 Answers1

1

Looking at the file-loader documentation, the publicPath parameter seems to be what you need, though they don't go into a lot of detail. https://github.com/webpack-contrib/file-loader#filename-templates

Here's a discussion on Github with a similar issue. https://github.com/webpack-contrib/file-loader/issues/32#issuecomment-250622904

I think you should be able to do something like this:

../priv/static/fonts/[name]-[hash].[ext]&publicPath=/fonts/

Doodlebot
  • 926
  • 5
  • 9
  • Thanks for your help. I found this as well - public path didn't really work out for me standalone. It turns out that having relative paths in `output.path` doesn't really play well with anything. I adjusted that config (and included publicPath), and it appears that `file-loader` will behave as expected now. Will mark this as accepted, as others who stumble here probably won't have started with a relative path in their `output.path`. – Brandon Mar 27 '17 at 22:24