webpack为啥这么难搞明白

        网上在介绍webpack的时候，一般都是照本宣科，但是对于初学者来说，其他会还是不太懂怎么回事。下面我还是要根据自己的理解跟大家简单介绍一下。webpack工程化的部分，现在用一张图搞清楚到底怎么回事，然后再来学习webpack将会事半功倍。

分清业务代码和工程化代码

        首先要清楚，咱们写的业务功能代码即使不通过工程化也能够运行，进行工程化只是为了让你的功能代码在生产环境中运行的更高效，所以才出现了工程化构建工具，减少上线时不必要的麻烦。我们在进行工程化的时候，需要用工程化代码工具，这些工具也要进行一些配置，就是写一些工程化的配置代码。工程化构建工具也不仅仅只有webpack，另外还有gulp、fis3等。

工程化的整体过程

        就是将业务代码通过构建工具变成了线上代码的过程，在此过程中，webpack就对我们写的业务代码进行处理，但是不会改变代码的功能。

构建工具运行图

• nodejs是运行js代码的一个环境，在安装后就自带npm，而npm就是我们的包管理器，是自动化构建的基础。
• 我们在初始化的时候，需要初始化，有一个package.json的文件，这个文件中记录着我们需要哪些安装的npm包
• 其中，webpack也是我们安装的一个npm包，只是这个包比较特殊，能够用到其他的loader和plugin。
• 当我们配置到所有的webpack的设置内容的之后，就可以实现从业务代码到线上代码的跨越。
• 有时候需要对一些loader或者plugin进行单独的配置，只需要将这些个项目的根目录下就好了

打个比方

npm 是个皇帝，这个皇帝下了一道圣旨package.json，这时候他需要一个宰相webpack来帮他处理一件叫做对业务代码打包的事情，这个宰相webpack就找了几个人帮忙，一群人是文官loader，一群人是武官plugin，这些人都是要听宰相webpack的，宰相webpack告诉这些文官loader和武官plugin该处理哪些事情，至于怎样处理，可以通过配置文件单独配置或者是在webpack中直接配置(一般官网都有文档)。最终，业务代码通过宰相webpack变成线上代码，从而完成了整件事情。

webpack组成

mode input output plugin loader 这些大家可以看其他人的webpack介绍就好了，弄好了逻辑和结构关系，大家学习起来就更好理解。