I'm having trouble getting my font to load while using webpack2 with express. The JavaScript file is working fine, but the font just won't serve. Can someone please help me troubleshoot this issue? Here's a snippet of my webpack.config:
const devConfig = {
devtool: '#source-map',
entry: [
'./public/js/entry.js',
'webpack/hot/dev-server',
'webpack-hot-middleware/client'
]
,
output: {
filename: './js/main.js',
path: '/',
publicPath: publicPath
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
module: {
rules: [
{
test: /\.s(a|c)ss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?'
}
]
}
};
Within my SCSS file, I have the following reference:
src: url('../font-files/firasans-extralightitalic-webfont.woff2') format('woff2'), url('../font-files/firasans-extralightitalic-webfont.woff') format('woff');
} and my directory structure looks like this: https://i.sstatic.net/k4Bi5.png
However, I keep receiving this error message:
Module not found: Error: Can't resolve '../font-files/firasans-extralightitalic-webfont.woff2'
Can anyone point out what might be causing this issue? I've noticed some people include their fonts within the JavaScript file, but I prefer not to do it that way.