Webpack ExtractTextPlugin Error: Cannot resolve module '[object Object]'

115 阅读2分钟

这几天遇到个问题,由于项目中引入了font文件,但是打包的时候导出的静态资源访问路径有问题。

image.png

但是在项目打包结束之后

image.png

很明显访问路径不对。百度了千千万最后结果基本上都说是在build下的修改utils文件的内容

image.png 增加publicPath这一个属性。

但是

即使我不加这个publicPath在打包的时候会报错

image.png

这报错报的我心头难受,大概意思就是对象被转化成字符串了。(项目webpack版本1.1.4 extract-text-webpack-plugin版本1.0.1,个人感觉年代久远维护起来确实麻烦)。后来搜遍没有结果,没辙,打开nodeModule翻阅源码。

image.png

找到方法的实现。首先我们传递的是一个对象,并且只传递了一个对象那么这个if都没进去,直接看else。 options = loader ??? undefined = undefined ???,没关系我们继续看,loader = before,将我们的对象传递给loader。 在return的时候,我们看到一个ExtractTextPlugin.loader(mergeOptions({remove: true}, options))。那我们看看这个ExtractTextPlugin.loader和mergeOptions都是啥吧。

image.png

image.png

我们先从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],

image.png

让我们看到最后这个函数运用到return里面每一个属性对应的属性值这个generateLoaders函数的返回值,每一个返回值都是上述代码中展示的[Object Object],导致直接报错打包直接报错。

结果

问题是发现了,但是最后由于项目比较老,个人功力不足,不敢随意提升webpack版本,只能手动修改打包后的访问路径地址。

结语

如果后续有时间系统学习webpack再来对这里补充,今天周五,享受周末去啦,告辞~~~