webpack打包后bootstrap字体无法显示问题

问题：

在vue组件中，mint UI中的toast使用bootstrap字体后，经webpack打包，浏览器中点击触发toast后，相应字体图标无法显示，控制台不报错
部分代码如下

Toast({
                        message: 'hello',
                        position: 'bottom',
                        duration: 1000,
                        iconClass: 'glyphicon glyphicon-font',
                        className: 'mytoast'

解决过程

1、上网找资料后，发现可能是bootstrap中缺少fonts目录导致，因此重新安装bootstrap，确认包含fonts目录后，再次打包运行，控制台报错，提示无法找到glyphicons-halflings-regular.eot文件

2、再次确认，glyphicons-halflings-regular.eot的确存在于目录下，而且控制台提示的相对路径也没有错，尝试修改引入的bootstrap.css文件，将所有…/fonts替换为/fonts，保存。打包运行，控制台报错，提示无法找到glyphicons-halflings-regular.woff，glyphicons-halflings-regular.woff2，glyphicons-halflings-regular.ttf。

3、再次修改bootstrap.css文件，将上述3个文件的相对路径重新加上…，即复原为原来的相对路径。保存，打包运行，控制台报错，提示需要合适的loader处理字体文件，安装url-loader，

cnpm i url-loader --save

并在webpack配置文件中module节点添加：

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

再次打包运行，字体可以正确显示