webpack打包字体图标怎么配置
时间: 2023-09-04 20:15:23 浏览: 47
要在 Webpack 中打包字体图标,您需要使用 `file-loader` 或 `url-loader` 模块来处理字体文件。这两个模块都可以将字体文件转换为 base64 编码,并将其嵌入到 CSS 文件中或者将字体文件输出到指定的目录中。
以下是一个示例 Webpack 配置文件的代码片段,用于处理字体文件的加载和打包:
```javascript
module.exports = {
// ...
module: {
rules: [
// 处理字体文件
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 如果文件大小小于 8KB,将会转换成 base64 编码,否则将会输出到指定目录
name: 'fonts/[name].[hash:8].[ext]' // 输出的文件名和路径
}
}
]
}
]
}
// ...
}
```
在上面的代码片段中,我们使用了 `url-loader` 模块来处理字体文件。如果文件大小小于 8KB,将会转换成 base64 编码,并将其嵌入到 CSS 文件中,否则将会输出到指定目录中。输出的文件名和路径使用了文件内容的 hash 值来保证唯一性。
您可以根据您的具体情况,修改上面的配置来满足您的需求。