webpack build后字体无法显示问题

最近接到一个局单位的信息化改造项目，前端页面是个系统，心想不是网站直接用VUE比较适合，正好前年有个美女前端帮我写过一个VUE管理系统，这次正好能派上用场，无奈东西老了点，npm install不断报错不断修改，最后webpack自己还是用了4.0.0版本，接口用axios0.18.0。node的确是一个不错的东西，方便要什么npm一下，配合使用饿了么的UI或者IVIEW这种前端VUE框架，让前端开发变得如此简单，也就慢慢的顺应了一句话以后人人会编程。唯一不好的是node_module太大了，各种npm也会碰到版本兼容性的问题，这不npm run dev花了近2周的全部调试完了，前端项目准备上线让客户确认，npm run build后发现图标文件woff，ttf找不到文件导致图标变成了方块，第一反应是路径不正确，查了下浏览器，发现css文件中引用的字体是相对路径也就是css/static/fonts/xxxxxx.xxxxx.woff，找到css目录下的 css，查找这个被压缩后的文件的确找到了地址，更改成../fonts/xxx，刷新发现OK成功了。

但是这样太别扭了，心想一定在webpack中有配置的，不然这样编译一次改一次太麻烦了，最终找到build/webpack.prod.js 里面module:{rules:  下有个参数extract默认是true直接设置成false就可以了。