SPA 单页面应用优化基于webpack方面

一、前言

现在随着前端开发的复杂度和规模越来越大，不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。
在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。

二、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到文件系统

loader10问：https://www.jianshu.com/p/6a08e1b1f2fd

浅析webpack:https://www.cnblogs.com/chengxs/p/11022842.html

webpack面试题：
https://www.cnblogs.com/gaoht/p/11310365.html