Webpack4:WOFF、WOFF2、SVG加载失败

Question

中的错误/node_modules/bootstrap/dist/fonts/glyphicons-harlings-regular.woff 1:4模块分析失败：意外字符"(1:4(您可能需要一个适当的加载程序来处理此文件类型。(此二进制文件省略了源代码(

WOFF文件无法加载，我不知道文件加载程序为什么无法加载WOFF、WOFF2和SVG。

这是我的Webpack 4加载程序配置：

module: {
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /.css$/,
loader: "style-loader!css-loader"
},
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
exclude: /node_modules/,
loader: "file-loader"
},
{
test: /.(eot|ttf)$/,
loader: "file-loader",
},
{
test: /.html$/,
exclude: /node_modules/,
loader: 'html-loader'
},
{
test: /.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
}

请给我一个解决方案。

Answer 1

您可以为此使用webpack url加载器，它将解决您的问题。如果你使用的是npm，你可以安装npm install url-loader --save-dev，在你的webpack.config.js中，你可以写这样的模块设置

{test: /.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,loader: 'url-loader?limit=100000'}

并导入import img from './image.svg'等图像

Github：https://github.com/webpack-contrib/url-loader

NPM：https://www.npmjs.com/package/url-loader

Answer 2

{
test: /.woff(2)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: './font/[hash].[ext]',
mimetype: 'application/font-woff'
}
}
]
}

它对我有效。你也可以使用解析url加载程序

https://www.npmjs.com/package/resolve-url-loader