依赖摘要:
- 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]'
}
}
]
}
参考资料
- Vue项目编译时文件加载失败(Cannot read property 'context' of undefined)
ps: file-loader这么小的版本都有影响。。。?
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)