这几天遇到个问题,由于项目中引入了font文件,但是打包的时候导出的静态资源访问路径有问题。
但是在项目打包结束之后
很明显访问路径不对。百度了千千万最后结果基本上都说是在build下的修改utils文件的内容
增加publicPath这一个属性。
但是
即使我不加这个publicPath在打包的时候会报错
这报错报的我心头难受,大概意思就是对象被转化成字符串了。(项目webpack版本1.1.4 extract-text-webpack-plugin版本1.0.1,个人感觉年代久远维护起来确实麻烦)。后来搜遍没有结果,没辙,打开nodeModule翻阅源码。
找到方法的实现。首先我们传递的是一个对象,并且只传递了一个对象那么这个if都没进去,直接看else。 options = loader ??? undefined = undefined ???,没关系我们继续看,loader = before,将我们的对象传递给loader。 在return的时候,我们看到一个ExtractTextPlugin.loader(mergeOptions({remove: true}, options))。那我们看看这个ExtractTextPlugin.loader和mergeOptions都是啥吧。
我们先从mergeOptions来看if(!b) return a。 结合上限的来看我们option是一个undefined,进入判断返回
{remove:true}
接下来看this.loader方法require.resolve('./loader')是查询当前目录下loader.js模块文件的带有完整绝对路径的模块文件名,然后一个三目运算符由于我们options存在那么返回
"(xxx此处省略真实地址)\node_modules\extract-text-webpack-plugin\loader.js?{\"remove\":true}"
这就是我们ExtractTextPlugin.loader的返回值最后拼接一个对象生成
["(xxx此处省略真实地址)\node_modules\extract-text-webpack-plugin\loader.js?{\"remove\":true}",
{
use: sourceLoader,
fallback: 'vue-style-loader',
publicPath: '../../'
}].join('!')
这里展示最后拼接结果
(xxx此处省略真实地址)
node_modulesextract-text-webpack-pluginloader.js?{"remove":true}![object Object]
这里出现了[Object Object],
让我们看到最后这个函数运用到return里面每一个属性对应的属性值这个generateLoaders函数的返回值,每一个返回值都是上述代码中展示的[Object Object],导致直接报错打包直接报错。
结果
问题是发现了,但是最后由于项目比较老,个人功力不足,不敢随意提升webpack版本,只能手动修改打包后的访问路径地址。
结语
如果后续有时间系统学习webpack再来对这里补充,今天周五,享受周末去啦,告辞~~~