Output fonts, css files and other assets in a subdirectory of the dist folder

Question

I'm following the guide on the official webpack website. For a reproducible code see this section in the official website.

In the example provided, all the fonts are output under the dist folder. What I want is for the fonts to be output under a fonts subdirectory. Similarly for other types of assets such as css, images etc. I want them to be output under a folder depending on their extension.

The output would look something like this:

-/dist
--index.html
--bundle.js
--/css
---style1.css
--/fonts
---font1.woff
---font2.ttf

Answer 1

You can use file-loader to achieve that:

  {
    test: /\.(png|svg|jpe?g|gif)$/,
    include: /images/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          publicPath: 'images/'
        }
      }
    ]
  },
  {
    test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    include: /fonts/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/',
          publicPath: 'fonts/'
        }
      }
    ]
  },