Webpack 4: css-loader + file-loader to add fonts and their stylesheets in the build process
For posterity: this is the Webpack configuration with which I was able to obtain the result I was looking for.
module: {
rules: {
// Font stylesheets
{
test: /\.css$/,
use: [
{
loader: 'file-loader',
options: {
name: 'css/[hash].[ext]'
}
},
'extract-loader',
'css-loader',
'postcss-loader'
],
include: [/fonts/]
},
// Font files
{
test: /\.(woff|woff2|ttf|otf)$/,
loader: 'file-loader',
include: [/fonts/],
options: {
name: '[hash].[ext]',
outputPath: 'css/',
publicPath: url => '../css/' + url
}
},
}
}