webpack

webpack概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
Webpack 可以看作是一个模块的打包机，它做的事情就是分析你的项目结构，找到了模块以及其它的一些浏览器不能使用的拓展语言。并将其转换和打包为合适的格式提供浏览器使用
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具

四个核心概念：
    入口(entry)
    输出(output)
    loader
    插件(plugins)

简述webpack的作用
webpack可以将多种静态资源 js、css、less文件转换成一个静态资源文件，减少了页面的请求

简述loader、plugin的概念
loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定文件中
plugin : 在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果
二者的区别：
loader 用于加载某些资源文件。
plugin 用于扩展webpack的功能

webpack的构建流程

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

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

简述 webpack 和 grunt/gulp 的区别
1、grunt/gulp 是一种能够优化前端开发流程的工具，是基于task任务的
2、而webpack是一种模块化的解决方案，是基于整个项目进行构建的
3、不过webpack的优点使得webpack在很多场景下可以替代grunt/gulp类的工具