关于__webpack_public_path__的一些思考

前言：产品里有个困扰很久的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。

找下webpack文档 https://www.webpackjs.com/configuration/output/#output-publicpath

编译时无法获取的值，使用自由变量，在运行时动态获取，即满足最初的需求。

解决方案：

方案1.按照webpack文档内容，在入口处定义__webpack_public_path__，运行时动态获取。

方案2.在构建编译时，使用绝对地址指定assetsPublicPath的具体值。