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文件夹里。