现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。
在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。
知其然知其所以然。
1、核心概念
（1）entry：一个可执行模块或者库的入口。
（2）chunk：多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一个chunk，这是打包。
（3）loader：文件转换器。例如把es6转为es5，scss转为css等
（4）plugin：扩展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook，添加功能。
2、webpack构建流程（原理）
从启动构建到输出结果一系列过程：
（1）初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数，形成最后的配置结果。
（2）开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译。
（3）确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去。
（4）编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
（5）完成模块编译并输出：递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据entry配置生成代码块chunk。
（6）输出完成：输出所有的chunk到文件系统。
注意：在构建生命周期中有一系列插件在做合适的时机做合适事情，比如UglifyPlugin会在loader转换递归完对结果使用UglifyJs压缩覆盖之前的结果。
三、业务场景和对应解决方案
1、单页应用
一个单页应用需要配置一个entry指明执行入口，web-webpack-plugin里的WebPlugin可以自动的完成这些工作：webpack会为entry生成一个包含这个入口的所有依赖文件的chunk，但是还需要一个html来加载chunk生成的js，如果还提取出css需要HTML文件中引入提取的css。
一个简单的webpack配置文件栗子
const { WebPlugin } = require('web-webpack-plugin'); module.exports = { entry: { app: './src/doc/index.js', home: './src/doc/home.js' }, plugins: [ // 一个WebPlugin对应生成一个html文件 new WebPlugin({ //输出的html文件名称 filename: 'index.html', //这个html依赖的`entry` requires: ['app','home'], }), ], };说明：require: ['app', 'home']指明这个html依赖哪些entry，entry生成的js和css会自动注入到html中。
还支持配置这些资源注入方式，支持如下属性：
（1）_dist只有在生产环境中才引入的资源；
（2）_dev只有在开发环境中才引入的资源；
（3）_inline把资源的内容潜入到html中；
（4）_ie只有IE浏览器才需要引入的资源。
这些属性可以通过在js里配置，看个简单例子：
new WebPlugin({ filename: 'index.html', requires: { app:{ _dist:true, _inline:false, } }, }),这些属性还可以在模板中设置，使用模板好处就是可以灵活的控制资源的注入点。
new WebPlugin({ filename: 'index.html', template: './template.html', }), //template模板 <!DOCTYPE html> <html lang="zh-cn"> <head> <link rel="stylesheet" href="app?_inline"> <script src="ie-polyfill?_ie"></script> </head> <body> <div id="react-body"></div> <script src="app"></script> </body> </html>WebPlugin插件借鉴了fis3的思想，补足了webpack缺失的以HTML为入口的功能。想了解WebPlugin的更多功能，见。
2、一个项目管理多个单页面