私のプロジェクトファイル構造:
- dist
- src
- assets
- fonts
webpack.config.js
ファイルローダー用の次の webpack 構成エントリがあります。
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'
}
そして、私のscssファイルはフォントファイルを参照しています:
@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");
}
localhost:{port}/webpack-dev-server に移動すると、フォント ファイルがありません。webpack-dev-server からの出力にも、フォント ファイルに関連するものは何も表示されません。
file-loader は、フォント ファイルのコピーを webpack に提供することになっていませんか?