背景
我的项目应用 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;
。
解决思路
总结下日常解决我的项目中问题的思路
-
首先应用
百度
、Google
、chatgpt
查问,看是否有人遇到过相似问题,如果查到了那么问题解决,如果没查到可能有以下几种起因:-
有人遇到过相似的问题
- 关键字设置的有误导致答案没有搜寻进去;批改关键字或者增加关键字。
- 依据以后信息无奈推导出无效关键字。
- 无人遇到过这个问题;
- 超过 1 小时未解决,进入
第 2 步
-
-
进入源码寻找答案
- 找到问题切入点(最难)
- 向下层源码追溯问题起因
- 依据问题具体起因,从新搜寻解法或者自定义解法