webpack笔记（ 四 ）- 编译结果分析

我们每一次用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')