Webpack4 url-loader 字体图标变为方框，图标文件未加载

依赖摘要：

• webpack@4.44.2
• webpack-cli@3.1.0
• webpack-dev-server@3.1.5
• vue-loader@14.2.2
• vue-style-loader@4.1.2
• vue-template-compiler@2.5.17
• css-loader@0.28.11
• style-loader@1.2.1
• file-loader@1.1.6
• url-loader@0.6.2

url-loader是依赖于file-loader的，使用url-loader必须要手动安装file-loader。

我在从webpack3升级到webpack4后打包，url-loader发生报错（Cannot read property 'context' of undefined）

仅升级url-loader@4.1.0（当时最新版），不报错，但是字体图标仍然显示方框。

仅升级file-loader@6.1.0（当时最新版），不报错，同样显示方框。字体文件也没有正常打包到指定的路径。

但是通过增大配置limit值

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)/,
    loader: 'url-loader',
    options:{
        limit: 20000, // 加大limit值
    }
}

能够显示一部分，推测是一部分字体文件满足limit的小于20000Byte，打包时转换为base64了。

字体显示方框，说明入口文件中import 的css是正常加载了，就是css中定义字体时依赖的字体文件没有加载进来。

后来将file-loader从原来的1.1.5升级到1.1.6后，url-loader@0.6.2不变，图标显示正常了（参考资料1也是换到了1.1.6）

webpack url-loader配置参考：

module: {
    rules: [
        // ... 省略其他配置
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'static/fonts/[name].[hash:7].[ext]'
            }
        }
    ]
}

参考资料

1. Vue项目编译时文件加载失败(Cannot read property 'context' of undefined)

ps: file-loader这么小的版本都有影响。。。？