关于vue-cli4:webpack配置publicPath无效问题

背景

我的项目应用vue-cli-service@4打包一个bundle.js；
心愿bundle援用的文件应用cdn，然而发现publicPath设置有效：

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

// 打印 configapi.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；。

解决思路

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

首先应用百度、Google、chatgpt查问，看是否有人遇到过相似问题，如果查到了那么问题解决，如果没查到可能有以下几种起因：
- 有人遇到过相似的问题
  - 关键字设置的有误导致答案没有搜寻进去；批改关键字或者增加关键字。
  - 依据以后信息无奈推导出无效关键字。
- 无人遇到过这个问题；
- 超过1小时未解决，进入第2步
进入源码寻找答案
- 找到问题切入点（最难）
- 向下层源码追溯问题起因
- 依据问题具体起因，从新搜寻解法或者自定义解法

背景