webpack(3.0)打包工具简介

webpack的核心概念：Entry，Output，Loaders，Plugins。webpack的默认配置文件是webpack.config.js，如果使用webpack命令时不特殊指定，那么默认执行webpack.config.js里的配置

webpack图解

入口(Entry)：

指定了webpack从哪个模块开始建立依赖进行打包，进入入口后webpack会算出入口文件依赖了(直接、间接)哪些模块或者库，所有的依赖将会被处理成包(bundles)然后输出

我们可以在webpack配置文件中配置entry属性来指定一个或多个入口

输出(Output)：

output属性指定webpack在哪将打包好的东西输出并且怎样命名输出的文件，我们可以在配置文件的output里自定义这些内容。

加载器(Loaders)：

加载器(loader)使webpack能够处理非javascript类型的文件(webpack本身只能处理js文件)，loader可以将所有类型的文件处理成webpack能处理的有效模块(modules)。特别重要的是loader将任意类型的文件转成应用程序依赖的模块。

在较高的层面上，webpack配置中的loaders一方面指定哪些文件该被loader(test属性)处理，另一方面处理这些文件让文件可以被添加到依赖(最终是bundle)(use属性)

还有更多loader里可配置的属性，在此不一一列举

插件(Plugins)：

使用loader转换文件时可以利用plugin做更多的事情。插件从优化bundle到定义环境变量，插件可以处理各种各样的任务。

使用插件，我们先需要require()插件并且将插件添加到plugins数组里，大多数插件是可以通过插件的选项自定义的。因为出于不同目的可能要多次使用一个插件，所以需要使用new创建一个插件的实例。webpack提供许多开箱即用的插件

以上只是基础，具体怎么配置还需要根据自己的需求来。个人觉得配置麻烦的地方在loader和plugin上

一个例子(伪代码方式)的核心代码。最核心的内容就是renderConf，我们需要在renderConf为webpack指定一系列的任务、loader包括plugins来匹配特定的文件进行特殊的处理

        renderConf.entry                                    // 指定入口文件

        var compiler = webpack(renderConf)    // 声明编译器compiler

        // 编译器的watch函数，传入配置参数监听整个文件的变化

        compiler.watch({}, (err, stats) => {})