关于__webpack_public_path__的一些思考

最新推荐文章于 2024-08-03 14:18:56 发布

sotower

最新推荐文章于 2024-08-03 14:18:56 发布

阅读量3.1k

点赞数

分类专栏： javascript webpack 文章标签： javascript webpack

本文链接：https://blog.csdn.net/sotower/article/details/106026731

版权

本文讨论了一个关于webpack_public_path导致的图片加载问题。当项目被第三方引用时，图片路径出现错误，原因是__webpack_public_path__的值为NAN。通过分析，提出两种解决方案：一是按webpack文档在入口处动态设置；二是编译时直接使用绝对地址指定publicPath。

摘要由CSDN通过智能技术生成

前言：产品里有个困扰很久的bug，某处图片引用使用的require('xxxx')的方式，线上环境没问题，图片正常加载显示。当被第三方引用后，发现图片不能加载，引用路径上出现protocol:host:port/path/NANimg/xxxx.png的奇怪信息。

问题：分析路径信息，发现与webpack的publicPath配置有关系，conf文件中使用url-loader配置如下：

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    query: {
        limit: 8192,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}

url-loader对于超过8KB大小的文件，使用file-loader处理，file-loader的文档如下：

publicPath的默认值__webpack_public_path__，跟踪发现，在出问题的场景中，__webpack_public_path__的值是NAN。