我们每一次用webpack打包以后都会生成一个dist文件夹, 下面有一个main.js文件,我们是时候关注一下webpack的编译结果main.js都写了什么
我们不看main.js到底写了什么, 我们在src目录下新建一个a.js, b.js和index.js, 各自书写代码如下
// a.js
console.log('i am a.js');
module.exports = {
a: 10,
b: 20
}
// index.js
console.log('i am index.js');
const result = require('./a');
console.log(result.b);
然后我们想一想, 我们能不能自己写一个dist/myMain.js出来然后实现跟webpack一样的功能呢? 然后咱再去看看webpack是怎么写的, 就很nice
OK, 咱在src下新建一个dist目录, 创建一个myMain.js, webpack做了什么呢, 他根据入口文件分析出入口文件与其他文件之间的依赖关系, 然后将这些文件合并成一个文件, 我们的入口文件就是index.js( 默认就会找index.js ), 而index.js依赖了a.js
// main.js
// 所以我们是要合并./src/index.js 和 ./src/a.js模块, 合并的结果里就是一个普普通通的JS代码, 不再存在任何的模块化代码
// 我们将模块都放进一个对象里这么来写
const modules = {
'./src/a.js': (module, exports, require) => {
console.log('i am a.js')