问题
在 Webpack 5 + Vue 3 + Element Plus 工程下遇到如此错误:
Element Plus: Module not found: Error: Can't resolve 'lodash/debounce'
分析
为了按需加载,采用如下 plugin:
const ElementPlus = require('unplugin-element-plus/webpack').default;
查阅对应文档了解到,element-plus 模块中有 es
和lib
两种资源,
默认引用的是 es
中的,资源文件扩展名为.mjs
。
而es
中具体组件代码依赖了lodash/debouce
,这个资源对应的文件扩展名是'.js'。
此时需要 webpack 的resolve.fullySpecified
配置加持,文档参考
具体设置为rules
添加如下规则:
{
rules:[ {
test: /\.mjs$/i,
resolve: {
byDependency: {
esm: {
fullySpecified: false
}
}
}
},
}]
}