我不明白這段代碼有什么問題,前端的字體無法加載
@font-face {
font-family: $font-suisse-bp;
font-weight: 300;
src: url('../../fonts/SuisseIntl-Light.woff2') format('woff2'),
url('../../fonts/SuisseIntl-Light.woff') format('woff');
}
我檢查了路徑,它是正確的!但是它在控制臺上顯示錯誤
import { fileURLToPath } from 'url';
import path from 'path'
import webpack from 'webpack';
import TerserPlugin from 'terser-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import ImageMinimizerPlugin from 'image-minimizer-webpack-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
const IS_DEVELOPMENT = process.env.NODE_ENV === 'dev'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
const dirApp = path.join(__dirname, 'app')
const dirShared = path.join(__dirname, 'shared')
const dirStyles = path.join(__dirname, 'styles')
const dirNode = 'node_modules'
export default {
entry: [
path.join(dirApp, 'index.js'),
path.join(dirStyles, 'index.scss')
],
resolve: {
modules: [
dirApp,
dirShared,
dirStyles,
dirNode
]
},
plugins: [
new webpack.DefinePlugin({
IS_DEVELOPMENT: JSON.stringify(IS_DEVELOPMENT)
}),
new CopyWebpackPlugin({
patterns: [
{
from: './shared',
to: '',
noErrorOnMissing: true
}
]
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 5 }],
],
}
},
}),
new CleanWebpackPlugin()
],
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ''
}
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
},
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
}
]
},
{
test: /\.(jge?g|png|gif|svg|woff2?|fnt|webp)$/,
loader: 'file-loader',
options: {
// limit: 100000,
name (file) {
return '[hash].[ext]'
}
}
},
{
test: /\.(jge?g|png|gif|svg|webp)$/,
use: [
{
loader: ImageMinimizerPlugin.loader,
}
]
},
{
test: /\.(glsl|frag|vert)$/,
loader: 'raw-loader',
exclude: /node_modules/
},
{
test: /\.(glsl|frag|vert)$/,
loader: 'glslify-loader',
exclude: /node_modules/
}
]
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
}
}
這是我的webpack.config文件
我試過url-loader,但似乎不起作用。
期望它在前端加載字體
[0]GET/e 44611 AE 26 a 81 ff 67630 . woff 2 404 1.907 ms-165 [0]GET/0 f8be 412 ab 2 BD 6 C4 db 5c . woff 404 1.273 ms-164
我在404的終端上得到這個