前段时间因为公司原有代码框架bug较多,同时加深对webpack的学习,所以自己着手从零配置webpack边开发边重构,尽可能保持框架,输出文件,以及所有代码整洁!
项目有引入iconfont图标,一直正常编译,昨天无意中发现有时候编译成功但页面无法加载,查看输出文件发现竟然多了带hash命名的ttf和woff文件,排查很久无果,翻查webpack官方文档,
asset/resource发送一个单独的文件并导出 URL。之前通过使用file-loader实现。asset/inline导出一个资源的 data URI。之前通过使用url-loader实现。asset/source导出资源的源代码。之前通过使用raw-loader实现。asset在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用url-loader，并且配置资源体积限制实现。
推测是使用的默认asset配置,因为后期代码体积增加,导致自动分割代码块,输出独立文件,但缺乏相应索引及自定义配置!
目前的解决方案是将webpack配置更改:
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, //实现其他文件类型整合在js里而不是带hash输出独立文件
type: 'asset'
}
换成
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, //实现其他文件类型整合在js里而不是带hash输出独立文件
type: 'asset/inline'
}
一律使用行内方式,一切恢复正常!
