webpack字体文件处理
1.下载字体文件
以bootstrap字体文件为例:
Bootstrap字体文件下载地址:https://v3.bootcss.com/getting-started/#download
下载完成后,把里面的css文件和fonts文件拷贝到项目里的入口文件夹下。
2.配置webpack.config.js文件
在webpack.config.js文件中的module中的rules里写入:
{
test:/\.(eot|svg|ttf|woff|woff2)/,
use:'file-loader',
},
注意,如果没有配置css,也需要在webpack.config.js文件中配置,代码如下:
{
test:/\.css$/,
use:['style-loader','css-loader']
},
webpack.config.js全部代码如下所示:
const path = require('path');
module.exports = {
entry:'./public/index.js',
output:{
path:path.resolve(__dirname,'build'),
filename:'bundle.js'
},
devServer:{
contentBase:'./build',
host:'localhost',
port:8080,
open:true,
},
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader',{
loader:'postcss-loader',
options:{
plugins:[
require("autoprefixer")
]
}
}]
},
{
test:/\.(png|jpg|gif|jepg)$/,
use:[{
loader:'file-loader',
options:{
name:'[path]dudu.jpg',
}
}]
},
{
test:/\.(eot|svg|ttf|woff|woff2)/,
use:'file-loader',
},
]
}
}
2.在index.js文件中引入bootstrap.min.css文件
代码为:
import './css/bootstrap.min.css';
3.在index.html中使用bootstrap字体图标
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="header">111</div>
//使用字体图标
<span class="glyphicon glyphicon-user"></span> User
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
4.打包
在终端输入npm run dev
进行打包。
打包完成后,我们会发现,在build文件夹下出现了好多字体文件,我们还可以把所有字体文件放在一个文件夹里,方法就是在use中的options中写一下output,代码如下:
{
test:/\.(eot|svg|ttf|woff|woff2)/,
use:[{
loader:'file-loader',
options:{
outputPath:'./fonts',
}
}]
},
这时,我们再打包以后,就会发现build文件夹下所有的字体文件都被放到了fonts文件夹里。