webpack-使用url-loader处理字体文件

把字体文件放到 icons 文件下

在css 引用这个

   .icon{
             width: 50px;
            height: 50px;

            background: url("../icons/check-circle.svg");
            background-size: cover;

        }

index.html 使用

<div class="icon">
</div>

在webpack.config.js 配置匹配规则

,{test: /.(svg|ttf|eot|woff|woff2)$/,use:[‘url-loader’]} 这个就是图标的匹配规则

 module: {//这个节点用于配置所有的第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            {test: /\.css$/,use:['style-loader','css-loader']}
            //test 代码是匹配规则， 我们用的是.css 需要用 loader 处理。
            ,{test: /\.less$/,use:['style-loader','css-loader','less-loader']}
            //由于less 文件也是一种样式，也是需要用到 css 处理模块
            ,{test: /\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=2200&name=[hash:4]-[name].[ext]']}

             ,{test: /\.(svg|ttf|eot|woff|woff2)$/,use:['url-loader']}

        ]

    },

运行 npm run dev

结果如下：