写在前面：
本文是webpack的一个学习笔记，涉及webpack打包流程、plugin、loader的编写、以及实现一个简易版的webpack。
欢迎交流&有任何问题请大佬斧正

参考：
《深入浅出webpack》（写的很好，但是是基于webpack3+，tapable1.0以前的，跟最新的有些区别，但原理流程写的很清楚）
webpack原理与实战
webpack详解

本文基于webpack4+

webpack是一个打包模块化js的工具，可以通过loader转换文件，通过plugin扩展功能。
它本身结构精巧，基于tapable的插件架构，扩展性强，众多的loader或者plugin让webpack显得复杂。

一、webpack核心概念

一个常见的webpack配置长这样：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: "./app/entry", // string | object | array
  // Webpack打包的入口
  output: {  // 定义webpack如何输出的选项
    path: path.resolve(__dirname, "dist"), // string
    // 所有输出文件的目标路径
    filename: "[chunkhash].js", // string
    // 「入口(entry chunk)」文件命名模版
    publicPath: "/assets/", // string
    // 构建文件的输出目录
    /* 其它高级配置 */
  },
  module: {  // 模块相关配置
    rules: [ // 配置模块loaders，解析规则
      {
        test: /\.jsx?$/,  // RegExp | string
        include: [ // 和test一样，必须匹配选项
          path.resolve(__dirname, "app")
        ],
        exclude: [ // 必不匹配选项（优先级高于test和include）
          path.resolve(__dirname, "app/demo-files")
        ],
        loader: "babel-loader", // 模块上下文解析
        options: { // loader的可选项
          presets: ["es2015"]
        },
      },
  },
  resolve: { //  解析模块的可选项
    modules: [ // 模块的查找目录
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"], // 用到的文件的扩展
    alias: { // 模块别名列表
      "module": "new-module"
      },
  },
  devtool: "source-map", // enum
  // 为浏览器开发者工具添加元数据增强调试
  plugins: [ // 附加插件列表
    new HtmlWebpackPlugin({template: './src/index.html'})
  ],
}

Entry：指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库
Output：输出的文件名以及输出的目录
Loaders：文件转换器。Loaders将各类型的文件处理成webpack能够处理的模块，例如把es6转换为es5，scss转换为css
Plugins：用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。
Chunk：coding split的产物，我们可以对一些代码打包成一个单独的chunk，比如某些公共模块，去重，更好的利用缓存。或者按需加载某些功能模块，优化加载时间。

二、webpack构建流程

从启动webpack构建到输出结果经历了一系列过程，它们是：

解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。
注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。
在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
输出所有chunk到文件系统。

需要注意的是，在构建生命周期中有一系列插件在合适的时机做了合适的事情，比如UglifyJsPlugin会在loader转换递归完后对结果再使用UglifyJs压缩覆盖之前的结果。

三、webpack安装

如果你使用 webpack 4+ 版本，你还需要安装 CLI。

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

新建一个webpack.config.js文件
配置entry、output等必要内容

新建src文件夹，里面新建index.js文件

四、loader

对一个个单独的文件进行转换

常用loader：
https://webpack.docschina.org/loaders/

babel-loader把es6转换成es5
file-loader把文件替换成对应的URL
raw-loader注入文本文件内容到代码里去

写一个loader

写一个将js文件中的mll都替代成另一个词的loader

可以在webpack.config.js同级新建一个文件夹loaders
里面新建一个文件replaceLoader.js

// loader就是一个函数
// 不能写成箭头函数
// 因为要用到this指向

// source:引入文件的内容
module.exports = function(source) {
    return source.replace('mll', 'mll cool')
}

写一个loader其实很简单，将源代码处理后return就可以了

webpack中引入：
webpack.config.js

    module: {
        rules: [{
            test: /\.js/,
            use: [{
                loader: path.resolve(__dirname, './loaders/replaceLoader.js')
            }
            ]
        }]
    }

引入loader的位置

package.json

  "scripts": {
    "build": "webpack"
  },

执行npm run build
打包的时候就会把js文件里的mll替换成mll cool

1.options传参

webpack.config.js

    module: {
        rules: [{
            test: /\.js/,
            use: [{
                loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
                options: {
                    name: 'wasabi'
                }
            }
            ]
        }]
    }

loaders/replaceLoader.js

module.exports = function(source) {
    console.log(this.query)
    return source.replace('mll', 'mll cool')
}

在loader中，this.query能取到options中的值
打印出来的结果为
{ name: 'wasabi' }

因此

module.exports = function(source) {
    return source.replace('mll', this.query.name)
}

可以通过外部传options来改变替换的内容

this.query的官方说法：

https://www.webpackjs.com/api/loaders/#this-query

如果这个 loader 配置了 options 对象的话，this.query 就指向这个 option 对象。
如果 loader 中没有 options，而是以 query 字符串作为参数调用时，this.query 就是一个以 ? 开头的字符串。
options 已取代 query，所以此属性废弃。使用 loader-utils 中的 getOptions 方法来提取给定 loader 的 option。

loader-utils

推荐使用loader-utils

npm install loader-utils --save-dev

举一个和callback一起使用的例子
https://www.webpackjs.com/api/loaders/#this-callback

this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap?: SourceMap,
  meta?: any
);

module.exports = function(source) {
    const options = loaderUtils.getOptions(this)
    const result = source.replace('mll', options.name)
    this.callback(null, result) // 等价于return
    // this.callback(null, result, source, meta)
}

this.callback就相当于一个return的操作
但比return好的是，能传出去更多内容，例如源代码等等

2.异步操作

若loader中有异步操作

const loaderUtils = require('loader-utils')

module.exports = function(source) {
    const options = loaderUtils.getOptions(this)
    setTimeout(()=>{
        const result = source.replace('mll', options.name)
        return result
    }, 1000)
}

因为一开始调用loader的时候没有return东西，因此会报错

 Error: Final loader (./loaders/replaceLoader.js) didn't return a Buffer or String

解决：
this.async()

const loaderUtils = require('loader-utils')

module.exports = function(source) {
    const options = loaderUtils.getOptions(this)
    const callback = this.async()
    setTimeout(()=>{
        const result = source.replace('mll', options.name)
        callback(null, result)
    }, 5000)
}

然后打包，就能看到，打包时间5000+ms

Hash: aa999e77339b23001859
Version: webpack 4.39.3
Time: 5089ms

3.使用多个loader

loader的使用顺序是从下到上，从右到左

use: [{
    loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
},{
    loader: path.resolve(__dirname, './loaders/replaceLoaderAsync.js'),
    options: {
        name: 'wasabi'
    }
}
]

因此是先做replaceLoaderAsync，replaceLoaderAsync处理后的代码再扔进replaceLoader做处理

每次写
path.resolve(__dirname, './loaders/replaceLoaderAsync.js'),
很麻烦，有什么简化方法吗？

可以这么写：

resolveLoader: {
    modules: ['node_modules', './loaders']
},
module: {
    rules: [{
        test: /\.js/,
        use: [{
            loader: 'replaceLoader'
        },{
            loader: 'replaceLoaderAsync',
            options: {
                name: 'wasabi'
            }
        }
        ]
    }]
}

可以用resolveLoader
表示loader先在node_modules中找，找不到的话在./loaders下找

4.loader用途

自己开发loader一般可用在哪里呢？
对源代码做一些包装

例如：

网页有中文版和英文版，可以最开始写的时候弄一个占位符，在打包的时候通过loader切换？？
代码做异常监控
在loader中对source中的function做try catch的包装。这样就可以不对业务源代码做改动了

五、plugin

常用plugin：https://webpack.docschina.org/plugins/

plugin编写

plugin 可以通过一些 hook 函数来拦截 webpack 的执行，甚至你可以运行一个子编译器和 loader 串联

a).Compilation、compiler

plugin 插件其实是一个含有 apply 方法的 class，而 apply 方法的参数就是 compiler 对象，compiler 对象里有各种钩子，这些钩子分别会在 webpack 的运行过程中触发，而实现这些钩子的核心是 tapable ，这个 tapable 还算好理解，可以把它看做是一个更高级的发布-订阅。

总结：

Compiler 对象包含了 Webpack 环境所有的的配置信息，包含 options，loaders，plugins 这些信息，这个对象在 Webpack 启动时候被实例化，它是全局唯一的，可以简单地把它理解为 Webpack 实例；
Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等，代表了一次单一的版本构建和生成资源。当 Webpack 以开发模式运行时，每当检测到一个文件变化，一次新的 Compilation 将被创建。Compilation 对象也提供了很多事件回调供插件做扩展。通过 Compilation 也能读取到 Compiler 对象。
Compiler 和 Compilation 的区别在于：Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只是代表了一次新的编译。

可以通过 compilation 的 assets 对象来编写新的文件，或是修改已经创建的文件。

b).新建一个plugins

webpack.config.js同级下新建一个plugins文件夹

里面新建一个copyright-webpack-plugin.js文件

在原型上定义apply方法

// loader是个函数，plugin是个类

class CopyrightWebpackPlugin{
    constructor(options) {
        console.log('use plugin')
        console.log(options)
    }

    // 调插件时会调用apply方法
    // compiler 可以理解为webpack实例,存储了webpack各种各样的内容，打包的过程
    apply(compiler) {

    }
}

module.exports = CopyrightWebpackPlugin

webpack.config.js

const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin')

module.exports = {
    .....
    plugins: [
        new CopyrightWebpackPlugin({
            name: 'mll'
        })
    ]
}

在插件的constructor中可以拿到向插件中传的值
因此打印出来

use plugin
{name: 'mll'}

c).hooks

tapable

tapable 这个小型 library 是 webpack 的一个核心工具，但也可用于其他地方，以提供类似的插件接口。webpack 中许多对象扩展自 Tapable 类。这个类暴露 tap, tapAsync 和 tapPromise 方法，可以使用这些方法，注入自定义的构建步骤，这些步骤将在整个编译过程中不同时机触发。

webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。

webpack3及其以前使用的是Tapable1.0之前的版本，提供了包括：

plugin(name:string, handler:function)注册插件到Tapable对象中
apply(…pluginInstances: (AnyPlugin|function)[])调用插件的定义，将事件监听器注册到Tapable实例注册表- 中
applyPlugins*(name:string, …)多种策略细致地控制事件的触发，包括applyPluginsAsync、- applyPluginsParallel等方法实现对事件触发的控制

之后使用的是1.0的Tapable

Tapable 1.0

暴露出很多的钩子，可以使用它们为插件创建钩子函数

const {
    SyncHook,
    SyncBailHook,
    SyncWaterfallHook,
    SyncLoopHook,
    AsyncParallelHook,
    AsyncParallelBailHook,
    AsyncSeriesHook,
    AsyncSeriesBailHook,
    AsyncSeriesWaterfallHook
 } = require("tapable");

1.0 Tapable使用方法：
https://github.com/webpack/tapable
https://juejin.im/post/5aa3d2056fb9a028c36868aa

Sync*类型的钩子：

注册在该钩子下面的插件的执行顺序都是顺序执行。
只能使用tap注册，不能使用tapPromise和tapAsync注册

对于Async*类型钩子：

支持tap、tapPromise、tapAsync注册

webpack中的使用

https://www.webpackjs.com/api/compiler-hooks/#emit

生命周期钩子函数，是由 compiler 暴露，可以通过如下方式访问：

compiler.hooks.someHook.tap(/* ... */);

取决于不同的钩子类型，也可以在某些钩子上访问 tapAsync 和 tapPromise。

someHook为具体的钩子名称
tap 同步、tapAsync 异步、tapPromise
异步可以使用 tap/tapAsync/tapPromise 方法触及。同步只能使用tap

以emit和compile的使用为例：

emit（异步hook）:
AsyncSeriesHook
生成资源到 output 目录之前。
参数：compilation

compile（同步hook）:
SyncHook
一个新的编译(compilation)创建之后，钩入(hook into) compiler。

写一个CopyrightWebpackPlugin

// loader是个函数，plugin是个类

class CopyrightWebpackPlugin{
    constructor(options) {
        console.log('use plugin')
        console.log(options)
    }

    // 调插件时会调用apply方法
    // compiler 可以理解为webpack实例,存储了webpack各种各样的内容，打包的过程
    apply(compiler) {
        // 同步，一个参数即可，不用传callback，后面也不用手动调用callback
        compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
            console.log('compile')
        })

        // 异步时刻值（异步勾子）
        // compilation中只存放了和这次打包有关的内容
        // emit 时刻
        // 异步是两个参数
        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation, cb) => {
            console.log(compilation.assets) // 打包生成的内容
            // 在我们即将把代码放到dist目录之前，又增加了一个文件
            compilation.assets['copyright.txt'] = {
                // 内容
                source: function() {
                    return 'copyright by mll'
                },
                size: function() {
                    return 16; // 内容长度
                }
            }
            cb() // 一定要在最后调用一下cb
        })
    }
}

module.exports = CopyrightWebpackPlugin

会在dist目录下多生成一个copyright.txt文件，里面有内容copyright by mll
除此之外，还有done等等时间钩子。查阅文档即可https://www.webpackjs.com/api/compiler-hooks/

注意下同步和异步的不同写法：
同步：

compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
    console.log('compile')
})

同步只能使用tap触及
一个参数compilation

异步：

compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation, cb) => {
    console.log('test') 
    cb() // 一定要在最后调用一下cb
})

异步可以使用 tap/tapAsync/tapPromise 方法触及
两个参数（compilation, cb），第二个参数为回调函数cb，且最后一定要调用下这个回调函数cb()
（即在插件处理完任务时需要调用回调函数通知 Webpack，才会进入下一处理流程。如果不执行 cb()，运行流程将会一直卡在这不往下执行）

插件能够钩入(hook) 到在每个编译(compilation)中触发的所有关键事件。在编译的每一步，插件都具备完全访问 compiler 对象的能力，如果情况合适，还可以访问当前 compilation 对象。

d).想知道compilation里面有些什么&& 调试 Webpack

由于 Webpack 运行在 Node.js 之上，调试 Webpack 就相对于调试 Node.js 程序。

在package.json中，加入

  "scripts": {
    "debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js",
  },

node在运行webpack.js的时候，传递些node的参数
--inspect 开启node的调试工具
--inspect-brk 在运行webpack做调试的时候，在运行webpack命令执行的时候，在第一行打一个断点

运行npm run debug

打开浏览器控制台，发现控制台上会多一个绿色的node标志，点击标志，会打开一个node调试框DevTools-Node.js

就会到第一行的断点位置，这个文件就是webpack的打包过程

在我们写的plugin上也打上断点debugger

compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation, cb) => {
    debugger
    ...
})

就可以开始调试了

调试的时候就可以看到compilation里面有哪些内容了
1.可以鼠标放在compilation变量上
2.也可以compilation加到调试台右边的watch里，就能展开看了

六、编写一个简易版webpack

写一个bundler，了解webpack在打包时都做了什么

a).准备工作

src/index.js

import message from './message.js'

console.log(message)

src/message.js

import {word} from './word.js'

const message = `say ${word}`

export default message

src/word.js

export const word = 'hello'

根目录下新建一个bundler.js文件，就是我们要写的打包文件

b).一些依赖包的安装

1.想要命令行中console出来的东西有颜色:安装cli-highlight

npm install cli-highlight -g

用法：
node bundler.js | highlight
（在原本的命令后加上 | highlight）
这样打印出的内容就有颜色标识

2.把源代码解析为抽象语法树ast
https://www.babeljs.cn/docs/babel-parser

npm i @babel/parser --save

3.遍历ast

npm install @babel/traverse --save

https://www.babeljs.cn/docs/babel-core

npm i @babel/core --save

5.es6转es5

npm i @babel/preset-env --save

c).编写bundler.js

1.对入口文件进行分析

首先对入口文件做一个分析：
bundler.js：

// 读取入口文件，分析入口文件里的代码

const fs = require('fs')
const path = require('path')
const paser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

const moduleaAnalyser = (filename) => {
    const content = fs.readFileSync(filename, 'utf-8')
    const ast = paser.parse(content, {
        sourceType: 'module'
    }) // 抽象语法树 ast 是一个js对象
    const dependencies = {} // 入口文件的依赖
    // 遍历抽象语法树
    traverse(ast, {
        // 如果包含import引入语句，就会走这个函数
        ImportDeclaration({node}) { 
            // console.log(node) // 能分析出源代码中有多少依赖
            const dirname = path.dirname(filename) // 拿到filename的文件夹路径
            // console.log(dirname)
            const newFile = './' + path.join(dirname, node.source.value) // node.source.value为相对路径，这样可以拼成绝对路径
            dependencies[node.source.value] = newFile
            // console.log(dependencies) //{ './message.js': './src/message.js' } key为相对路径，value为绝对路径
        }
    })
    // 将ast转换为浏览器可以使用的代码
    const {code} = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"]// es6转为es5
    })
    // console.log(code)
    return {
        filename,
        dependencies,
        code
    }
    // console.log(dependencies)
    // console.log(ast.program.body)
}

const moduleInfo = moduleaAnalyser('./src/index.js')
console.log(moduleInfo)

执行node bundler.js | highlight ，会打印出来如下内容：

{ filename: './src/index.js',
  dependencies: { './message.js': './src/message.js' },
  code:
   '"use strict";\n\nvar _message = _interopRequireDefault(require("./message.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log(_message["default"]);' }

filename：分析的模块路径（文件路径）
dependencies：该模块依赖的其他模块（文件路径）（key为相对路径，value为绝对路径，这样写是为了后面使用方便）
code：该模块转换后的代码

2.从入口文件开始，对所有其依赖的模块做相同的分析

// 读取入口文件，分析入口文件里的代码

const fs = require('fs')
const path = require('path')
const paser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

// 对模块进行分析
const moduleaAnalyser = (filename) => {
    const content = fs.readFileSync(filename, 'utf-8')
    const ast = paser.parse(content, {
        sourceType: 'module'
    }) // 抽象语法树 ast 是一个js对象
    const dependencies = {} // 入口文件的依赖
    // 遍历抽象语法树
    traverse(ast, {
        // 如果包含import引入语句，就会走这个函数
        ImportDeclaration({node}) { 
            // console.log(node) // 能分析出源代码中有多少依赖
            const dirname = path.dirname(filename) // 拿到filename的文件夹路径
            // console.log(dirname)
            const newFile = './' + path.join(dirname, node.source.value) // node.source.value为相对路径，这样可以拼成绝对路径
            dependencies[node.source.value] = newFile
            // console.log(dependencies) //{ './message.js': './src/message.js' } key为相对路径，value为绝对路径
        }
    })
    // 将ast转换为浏览器可以使用的代码
    const {code} = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"]// es6转为es5
    })
    // console.log(code)
    return {
        filename,
        dependencies,
        code
    }
    // console.log(dependencies)
    // console.log(ast.program.body)
}

// 整个项目的依赖关系,依赖图谱
// entry 项目的入口文件
const makeDependenciesGraph = (entry) => {
    const entryModule = moduleaAnalyser(entry) // 对入口文件进行依赖分析

    const graphArray = [entryModule]
    for(let i = 0; i < graphArray.length; i++) {
        const item = graphArray[i]
        const {dependencies} = item
        if(dependencies) {
            for(let j in dependencies) {
                graphArray.push(moduleaAnalyser(dependencies[j]))
            }
        }
    }
    console.log(graphArray)

    // 为了后面代码打包比较方便，对它做一个结构上的转换
    const graph = {}
    graphArray.forEach(item => {
        graph[item.filename] = {
            dependencies: item.dependencies,
            code: item.code
        }
    })
    //console.log(graph)
    return graph

}

// const moduleInfo = moduleaAnalyser('./src/index.js')
// console.log(moduleInfo)

const graphInfo = makeDependenciesGraph('./src/index.js')
console.log(graphInfo)

但是这里生成的代码还不能直接在浏览器上执行，因为浏览器上是没有require函数，exports对象的。
继续改造：

// 读取入口文件，分析入口文件里的代码

const fs = require('fs')
const path = require('path')
const paser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

// 对模块进行分析
const moduleaAnalyser = (filename) => {
    const content = fs.readFileSync(filename, 'utf-8')
    const ast = paser.parse(content, {
        sourceType: 'module'
    }) // 抽象语法树 ast 是一个js对象
    const dependencies = {} // 入口文件的依赖
    // 遍历抽象语法树
    traverse(ast, {
        // 如果包含import引入语句，就会走这个函数
        ImportDeclaration({node}) { 
            // console.log(node) // 能分析出源代码中有多少依赖
            const dirname = path.dirname(filename) // 拿到filename的文件夹路径
            // console.log(dirname)
            const newFile = './' + path.join(dirname, node.source.value) // node.source.value为相对路径，这样可以拼成绝对路径
            dependencies[node.source.value] = newFile
            // console.log(dependencies) //{ './message.js': './src/message.js' } key为相对路径，value为绝对路径
        }
    })
    // 将ast转换为浏览器可以使用的代码
    const {code} = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"]// es6转为es5
    })
    // console.log(code)
    return {
        filename,
        dependencies,
        code
    }
    // console.log(dependencies)
    // console.log(ast.program.body)
}

// 整个项目的依赖关系,依赖图谱
// entry 项目的入口文件
const makeDependenciesGraph = (entry) => {
    const entryModule = moduleaAnalyser(entry) // 对入口文件进行依赖分析

    const graphArray = [entryModule]
    for(let i = 0; i < graphArray.length; i++) {
        const item = graphArray[i]
        const {dependencies} = item
        if(dependencies) {
            for(let j in dependencies) {
                graphArray.push(moduleaAnalyser(dependencies[j]))
            }
        }
    }
    console.log(graphArray)

    // 为了后面代码打包比较方便，对它做一个结构上的转换
    const graph = {}
    graphArray.forEach(item => {
        graph[item.filename] = {
            dependencies: item.dependencies,
            code: item.code
        }
    })
    //console.log(graph)
    return graph

}

const generateCode = (entry) => {
    const graph = JSON.stringify(makeDependenciesGraph(entry))
    // 闭包 避免污染全局
    // 返回的是个字符串，最后在浏览器中运行
    // 浏览器上是没有require函数，exports对象的，所以代码直接放到浏览器上是不能直接运行的
    // 因此我们要构造这两个东西
    //  eval(code) // 执行代码
    // localRequire 相对路径转换绝对路径
    return `
        (function(graph){
            function require(module) {
                function localRequire(relativePath) {
                    return require(graph[module].dependencies[relativePath]);
                }
                var exports = {};
                (function(require, exports, code){
                    eval(code) 
                })(localRequire, exports, graph[module].code);
                return exports;
            };
            require('${entry}')
        })(${graph});
    `
}

// const moduleInfo = moduleaAnalyser('./src/index.js')
// console.log(moduleInfo)

const graphInfo = generateCode('./src/index.js')
console.log(graphInfo)

运行 node bundler.js | highlight 就会生成如下一段代码

        (function(graph){
            function require(module) {
                function localRequire(relativePath) {
                    return require(graph[module].dependencies[relativePath]);
                }
                var exports = {};
                (function(require, exports, code){
                    eval(code) 
                })(localRequire, exports, graph[module].code);
                return exports;
            };
            require('./src/index.js')
        })({"./src/index.js":{"dependencies":{"./message.js":"./src/message.js"},"code":"\"use strict\";\n\nvar _message = _interopRequireDefault(require(\"./message.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\nconsole.log(_message[\"default\"]);"},"./src/message.js":{"dependencies":{"./word.js":"./src/word.js"},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports[\"default\"] = void 0;\n\nvar _word = require(\"./word.js\");\n\nvar message = \"say \".concat(_word.word);\nvar _default = message;\nexports[\"default\"] = _default;"},"./src/word.js":{"dependencies":{},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.word = void 0;\nvar word = 'hello';\nexports.word = word;"}});

把这段代码复制到浏览器中，在console中执行，最后能输入say hello
这样，我们就把原本不能在浏览器端执行的代码转换为浏览器能执行的，webpack打包工具的原理也就是这样

七、生产环境和开发环境

生产环境和开发环境一般会配两个不同的webpack配置：
分开写配置文件就要涉及到使用命令执行不同的配置文件，我们可以使用npm的脚本命令，我们可以在package.json中找到scripts，添加如下命令

"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"

NODE_ENV=production 就是将运行环境设置成生产环境
webpack --config 就是运行webpack的配置文件
./webpack.production.config.js 是要运行的指定位置的文件，这个路径是相对根目录来说的
--progress 是编译过程显示进程百分比的

开发环境一般不会配压缩代码、生成hash的插件，避免打包时间过长

webpack原理