砥砺前行 
yarn add webpack webpack-cli mini-css-extract-plugin style-loader css-loader url-loader file-loader -D
1

相关字体和icon资源

字体图标库

实战

借助url-loader，可以识别并且处理eot、woff等结尾的字体文件。同时，根据字体文件大小，可以灵活配置是否进行base64编码。下面的demo就是当文件大小小于10KB的时候进行base64编码。具体配置如下：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'none',
    entry: {
        main: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff2?)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name]-[hash:6].min.[ext]',
                        limit: 1024 * 10, // 10kb以下的文件采用url-loader
                        outputPath: 'fonts/'
                    }
                }
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

index.js

import './assets/fonts/iconfont.css';
1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>处理字体文件</title>
    <link rel="stylesheet" href="./dist/app.css">
    <style>
        .icon {
          width: 2em;
          height: 2em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        <i class="iconfont icon-bingqilin"></i>
        <i class="iconfont icon-chushimao"></i>
        <i class="iconfont icon-chan"></i>
        <i class="iconfont icon-caidao"></i>
        <i class="iconfont icon-beizi"></i>
        <i class="iconfont icon-baomihua"></i>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bingqilin"></use>
        </svg>
    </div>
    <script src="./dist/bundle.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
### demo ```less @font-face { font-family: 'SourceHanSerifSC-Heavy'; src: url('./images/SourceHanSerifSC-Heavy.otf') format('truetype'); } .search { font-size: 20px; color: #f00; font-weight: bolder; font-family: 'SourceHanSerifSC-Heavy'; } ``` webpack配置： ```js { test: /.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: { name: '[name]_[hash:8][ext]' } } ] } ``` ## 参考文档 1. [iconfont字体图标的使用方法--超简单!](https://www.cnblogs.com/hjvsdr/p/6639649.html) 2. [认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg](https://www.jianshu.com/p/0d3be9b77eb9)

← 8. 配置sourceMap→