字体不能在Webpack 5中构建

Question

我的assets/fonts文件夹中有字体。在assets/common文件夹中有一个_fonts。scss文件，我使用@font-face包含字体，然后将它们导入主main。scss文件。

当我构建构建时，字体不会出现在dist文件夹中，也就是说，它们不会构建。如何解决这个问题?

// webpack config
const path = require("path");
const outputPath = "dist";
const entryPoint = "assets/js";
module.exports = {
entry: path.resolve(__dirname, entryPoint, "index.js"),
output: {
path: path.resolve(__dirname, outputPath),
clean: true,
filename: "scripts.js",
},
module: {
rules: [{
test: /.(scss|css)$/,
use: [
miniCss.loader,
{
loader: "css-loader",
options: {
url: false
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [require("postcss-preset-env")],
},
},
},
"sass-loader",
],
},
{
test: /.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
generator: {
filename: "fonts/[name].[ext]",
},
},
],
},
plugins: [
new miniCss({
filename: "style.css",
}),
],
};

Answer 1

尝试将文件名从:fonts/[name].[ext]更改为fonts/[name][ext]

基本上没有点，webpack会自动在文件扩展名中添加一个点。通过更改，生成的文件将是:fonts/fontname. tff。它可以解释为什么在dist文件夹中找不到它。

Answer 2

try this

{
loader: "css-loader",
options: {
url: true
},
},