webpack4 file-loader/url-loader加

file-loader/url-loader加载字体

1. 下载字体，比如：http://www.fontawesome.com.cn/
2. webpack配置
   exclude:[...path.resolve(__dirname, '../src/svg') ]是过滤/src/svg路径下的ICON图标，只处理字体svg文件

{
          test: /\.(eot|woff|ttf|woff2|appcache|svg)\??.*$/,
          exclude: [/^node_modules$/, path.resolve(__dirname, '../src/svg')],
          use:[{
              loader:'file-loader',
              options:{
                  name: "[name].[ext]",
                  outputPath: "static/fonts/"
              }
          }]
},

3. 在主文件main.js中引入字体样式文件

import './static/font-awesome-4.7.0/css/font-awesome.min.css'

完成，整个项目都可以使用字体样式了。

如果是使用url-loader，打包的时候，会发现static/目录下并没有字体文件，而使用file-loader加载，则会分离出字体文件。