webpack配置publicPath无效问题

背景

项目使用vue-cli-service@4打包一个bundle.js；
希望bundle引用的文件使用cdn，但是发现publicPath设置无效：

我们打印了最终生成的webpack config

// 打印 config
api.configureWebpack(config => {
    console.log('hyhy', config);
});

// 打印结果
{
    ...
    output: {
        path: '/ks-puzzle/custom-widgets/customization-table/dist',
        filename: '[name].js',
        publicPath: 'https://hyhyhy.com',
        libraryTarget: 'umd'
     },
    ...
}

可以看到我们设置的publicPath是生效的；但是生成的打包产物中publicPath未生效，如下：

...
/******/     // Object.prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";
/******/
/******/     // on error function for async loading
/******/     __webpack_require__.oe = function(err) { console.error(err); throw err; };
...

这里的__webpack_require__.p就是publicPath，值是空字符串，设置无效。

遇到问题后首先百度谷歌了一下publicPath not work等相关关键字，一段时间后未找到答案，开始进入源码找原因。

切入点：__webpack_require__.p

我们来到webpack中设置__webpack_require__.p的地方；

可以看到这里设置得publicPath为空字符串。以这里为起点开始追查

webpack入口

一直追溯到了webpack的起点

可以看到webpack接收到的publicPath就是空值，那么问题可能出在上一层也就是vue-cli-service这一层

vue-cli-service对publicPath的处理

在包@vue/cli-service中搜索publicPath，找到了下面这段代码

可以看到当使用vue-cli-service进行lib方式打包时，publicPath会恒置为空。问题定位到了

解决方案

获取到了进一步的信息后，重新进入谷歌搜索vue-cli-service target lib publicPath not work；

找到了社区解决方法：https://github.com/vuejs/vue-cli/issues/4896#issuecomment-569001811

使用自定义webpack plugin，在beforeRun的时候重新修改publicPath，明细如下：

function PublicPathWebpackPlugin() {}

PublicPathWebpackPlugin.prototype.apply = function (compiler) {
    compiler.hooks.beforeRun.tap('PublicPathWebpackPlugin', compiler => {
        compiler.options.output.publicPath = 'https://hyhyhy.com';
    });
};
api.configureWebpack(config => {
    config.plugins.unshift(new PublicPathWebpackPlugin());
});

打包后发现__webpack_require__.p设置正常，问题解决，done

PS

libraryTarget

追查问题过程中发现libraryTarget设置也是无效的

...
const configMap = {
    commonjs: genConfig('commonjs2', 'common'),
    umd: genConfig('umd', undefined, true),
    'umd-min': genConfig('umd', 'umd.min')
}

function genConfig(format, postfix = format, genHTML) {
    ...
    // set output target before user configureWebpack hooks are applied
    config.output.libraryTarget(format)

    // set entry/output after user configureWebpack hooks are applied
    const rawConfig = api.resolveWebpackConfig(config)
    ...
}

可以看到使用vue-cli-service打包必然打出3种包commonjs；umd；umd.min；。

解决思路

总结下日常解决项目中问题的思路

1. 首先使用百度、Google、chatgpt查询，看是否有人遇到过类似问题，如果查到了那么问题解决，如果没查到可能有以下几种原因：

   • 有人遇到过类似的问题

     • 关键字设置的有误导致答案没有搜索出来；修改关键字或者添加关键字。
     • 根据当前信息无法推导出有效关键字。
   • 无人遇到过这个问题；
   • 超过1小时未解决，进入第2步

2. 进入源码寻找答案

   • 找到问题切入点（最难）
   • 向上层源码追溯问题原因
   • 根据问题具体原因，重新搜索解法或者自定义解法