1

My project file structure:

- dist

- src
  - assets
    - fonts

webpack.config.js

I have the following webpack config entry for file loader:

  context: path.join(__dirname, 'src'),

  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },

  {
    test:  /\.(woff|woff2)(\?v=[0-9]\.[0-9])?$/,
    exclude: /node_modules/,
    loader: 'file-loader'
  }

And my scss file references the font file:

@font-face {
  font-family: 'Interface';
  font-style:  normal;
  font-weight: 400;
  src: url("/assets/fonts/Interface-Regular.woff2?v=1.6") format("woff2"),
       url("/assets/fonts/Interface-Regular.woff?v=1.6") format("woff");
}

If I go to localhost:{port}/webpack-dev-server the font files are not there. The output from webpack-dev-server also doesn't show anything related to my font files.

Isn't file-loader supposed to provide a copy of the font files to webpack?

Bob
  • 821
  • 1
  • 17
  • 36
  • Are you want to change output files to a different directory? – Vimal Raiyani Sep 07 '17 at 13:08
  • @VimalRaiyani Not too sure what you mean. On development I just want the font files to load from /app/assets/fonts. On production I can use the copy plugin to load from /dist/assets/fonts. – Bob Sep 07 '17 at 16:03
  • May be, This one helps you. -- https://github.com/webpack-contrib/file-loader/issues/32 – Vimal Raiyani Sep 08 '17 at 03:55
  • 1
    Bob, seems your regex in "test " property doesn't match your url for fonts(it expects 3 numbers in version), so file-loader isn't being called by webpack. – malonowa Sep 08 '17 at 10:29
  • @malonowa good catch, still doesn't work but I'll go ahead and update my regex – Bob Sep 08 '17 at 16:49

0 Answers0