作者：myprelude@github
原文链接： https://myprelude.github.io
转载请注明出处，保留原文链接和作者信息。

还是那句话 -- 知其然，知其所以然，以不变应万变！作为一个合格前端工程师，我不仅仅会配置webpack，还需要了解webpack基本的工作原理。这样不管是工作上遇到难题还是面试时加分都有很大的帮助。

了解webpack几个最核心的概念

• entry – 打包入口

webpack可以看成一个汽车加工厂，现在工人拿到客户的需求单，需要生产需求单生产一种汽车。这里的entry就是类似这个需求单，告诉webpack我们需要打包的文件。

• chunks – 代码块

生产汽车需求的各个零部件（轮胎、发动机、车门等）。这里chunks就是webpack打包后的代码块，最后将这些代码快组合成一个个模块，合并模块输出。

• loader – 文件转化器

汽车发动机由专门的发动机研发部生产，汽车的轮胎由轮胎工人加工。这里的loader对不同的文件执行不同的打包方式和规则（css文件由css-loader处理）。

• plugin – 插件

汽车在生成组装过程零部件生产只负责生产零件，至于做防锈、上漆、打蜡、贴膜等就需要其他放工人来处理了。这里的plugin就类似这些事情的，打包过程中对于很多loader不方便处理的事情就交给plugin来处理（对js进行压缩和代码混淆）。

webpack工作流程

        ++++++++++++++++++++++++++++++++++++     
        +     shell -》webpack.config.js   +     
        ++++++++++++++++++++++++++++++++++++
                        ||
                        ||
            +++++++++++++++++++++++++
            +      new webpack      +   生成compiler对象
            +++++++++++++++++++++++++
                        ||
                        ||
                ++++++++++++++++
                +    run()     +     生成 compilation对象
                ++++++++++++++++
                        ||
                        ||
                +++++++++++++++++
                +   addEntry()  +   找到入口文件，进行模块打包
                +++++++++++++++++  
                        ||
                        ||
        ++++++++++++++++++++++++++++++++++++
        +   根据入口文件递归的分析依赖模块      +
        +   对应的loader加载模块，生成AST     +  编译和构建
        +   生成chunks，挂载compilation上    +
        +   plugin拿取模块资源进行二度加工     +
        ++++++++++++++++++++++++++++++++++++  
                        ||
                        ||
                +++++++++++++++++
                +    output     +
                +++++++++++++++++                                    
---------------------------------------------------------
tabable是贯穿整个打不过程，实现插件的绑定和库的调用（发布订阅）。
插件的调用也贯穿整个过程。
打包过程中会生成两个对象 compiler  compilation。compoler上面挂载者webpack打包的配置
coompilation上面挂载compiler的引用以及经过处理后的代码块；
在编写插件时我们经常需要使用到这两个对象。