Bug with file-loader and dev server ?

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

When loading fonts using the file-loader and WebPack 2.2, some name patterns don’t work when serving the app using the dev server. The URL is generated right but the HTTP request result in a 404 error.

The actual dist build has all the right files at the right place and the fonts are loaded well.

It also worked fine with the dev server before I switched from WebPack 1.13 to 2.2.0.

If the current behavior is a bug, please provide the steps to reproduce.

This is the rule that doesn’t work:

            // fonts
            {
                test : /\.(eot|otf|woff|woff2|ttf|svg)(\?\S*)?$/,
                loader: 'file-loader?name=/assets/fonts/[name].[hash].[ext]',
            }

If I replace the file-loader with the url-loader it works:

            {
                test : /\.(eot|otf|woff|woff2|ttf|svg)(\?\S*)?$/,
                loader: 'url-loader?name=/assets/fonts/[name].[hash].[ext]',
            }

This very similar rule with a different filter, i.e. for images, works:

           {
                test : /\.(png|jpe?g|gif|ico)(\?\S*)?$/,
                loader: 'file-loader?name=/assets/images/[name].[hash].[ext]',
                include: /assets\/images/
            }

What is the expected behavior?

That the files are served by the dev server.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

OS: OSX 10.11.6
Node: 6.9.4
NPM: 3.10.10
Webpack: 2.2.0
Webpack-dev-server: 2.2.0
File-loader: 0.9.0
Url-loader: 0.5.7

Author: Fantashit

3 thoughts on “Bug with file-loader and dev server ?

  1. @joezimjs there was a recent “fix” to the file-loader and my images started giving 404’s. This was not specific to dev-server though, it broke in all my build configurations. The below fixed it for me as it seems the new file-loader code concatenates publicPath and outputPath. There has been some push back on this fix so watch out for further changes. I honestly don’t know what the best fix is, other than the one that doesn’t break my builds!

            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name]-[hash:8].[ext]',
                  publicPath: './',
                  outputPath: 'images/'
                }
              }
    
  2. There still seems to be an issue with this, because I ran into the same issue today with:

    webpack: 4.29.5
    file-loader: 3.0.1
    url-loader: 1.1.2
    webpack-dev-server: 3.2.1

    and the following config:

          {
            test: /\.ttf$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  fallback: 'file-loader',
                  limit: 8192,
                  name: '[name]-[hash].[ext]',
                  publicPath: 'assets/',
                }
              }
            ],
            include: path.resolve(__dirname, 'node_modules/react-native-vector-icons')
          }

    I tried the proposed solutions above by setting publicPath: '/' and outputPath: 'assets/ but that broke the URL’s when running webpack without the dev server.

    The solution I found was to set both publicPath and outputPath to 'assets/', which made webpack with or without the dev server generate the correct URL’s and emit the files to the correct folder without getting any 404s.

Comments are closed.