关于vue-cli4: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. 进入源码寻找答案

   • 找到问题切入点（最难）
   • 向下层源码追溯问题起因
   • 依据问题具体起因，从新搜寻解法或者自定义解法