webpack问题总结

[zhuzhh]

webpack循环引用问题

// index.js 入口文件
import a from './a'
a()

// a.js
import b from './b'
export const A = 'a'
console.log(b, '我是a文件')
b()
export default () => {
    console.log(A)
}

// b.js
import a from './a'
console.log(a, 'b文件') // undefined 'b文件'
a() // 报错
export default function() {
	console.log('我是b')
}

打包不会报错，但是执行打包文件会报错。
打包时，每个引入的js包，后会存放在installedModules对象中，a.js先被缓存，并先执行其内部代码，然后加载b.js，然后执行其内部代码，接着就是从installedModules对象中获取a模块的exports，由于a.js代码还没执行完，其exports值还是undefined

如果遇到真实业务场景，不会这么轻易发现循环引用，有可以是a引用b，b引用c，c引用a等。如何发现这种代码呢？使用circular-dependency-plugin插件，效果如下：从图中可以看到，如果项目存在循环引用的话，会有警告

elementUI按需加载需要如何实现