Webpack and file-loader not loading fonts

Question

I have the following webpack scripts:

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
  fonts: path.join(__dirname, 'app/assets/fonts')
};

My files are bundled and output to the build directory and it all works fine. However, I have now added a font loader. Inside my app directory I have font files inside the following folder: app/assets/fonts (currently only TTF but this will change).

const common = {
  entry: {
    app: PATHS.app
  },
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=stage-2,presets[]=react,plugins[]=transform-runtime'],
        exclude: /node_modules/
      },
      {


   test: /\.scss$/,
    loaders: ["style", "css?sourceMap", "sass?sourceMap"]
  },
  { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
]
    ]
  }
};

My fonts script above does absolutely nothing, I run both of my default scripts:

"build": "webpack",
"start": "webpack-dev-server"

And nothing gets put inside the public directory. Is this something I have to set separately? How can I tell the loader to create an identical directory (to that inside app/) inside the public folder with my font files?

I have now fixed this by combining my fonts differently and loading them within the styles folder, however, all the font files load indiscriminately inside the public/ directory. Is there a way I can tell webpack exactly where to transpile them? — HGB, May 10 '16 at 23:37

score 1 · Answer 1 · answered Nov 07 '20 at 06:59

Using the url-loader (without specifying any paths (output or public)) solved my problem (original answer found here https://www.robinwieruch.de/webpack-font)

//webpack.config.js

...
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
        },
      },
    ],
  },
  ...
};

Webpack and file-loader not loading fonts

1 Answers1