自动化构建工具（一）：原理与设计

日常的前端开发工作中，相信大家一定接触过前端工程化体系，而自动化构建工具，比如webpack，就是前端工程化体系中很重要的一部分。下面就结合自己在工作中的实践，总结一下所看所想：

自动化构建的原理和作用

对源项目文件或者资源进行文件级处理，将文件或者资源处理成需要的最佳输出结构和形式。这样就可以解决很多需要手动完成的事情，提高前端开发效率。

构建的原理大概分为7个步骤：

读取文件入口：构建工具会读取入口源文件到一个字符串buffer（或者文件对象）中。
分析模块引用：根据特定的标识分析出页面字符串Buffer中含有的模块引用。
按照引用加载模块：根据模块引用读取模块包含的html，css，js文件。
模块文件编译处理：进行对应的脚本转译和依赖分析，比如将es6转译成es5，将scss或less预处理成css等。该阶段完成后，构建工具将生成编译后的代码字符串buffer。
模块文件合并：将所有的js，css代码字符串buffer写入一个新的字符串buffer，将模块的HTML字符串buffer插入到源入口文件的字符串buffer中，生成线上域名路径，将路径名插入到源入口文件的字符串buffer中代替注释和的位置，标识css和js脚本引用的最终路径。
文件优化处理：通过不同插件对合并后的字符串buffer进行优化，比如去注释，压缩，合成图片等。
写入生成目录：按照一定的生成文件的规则将优化完成的字符串buffer写入到配置好的输出目录中。

处理的文件都是以字符串Buffer或者文件对象的形式存在于整个过程中，一般不同阶段的处理都是通过第三方插件完成的。

上面介绍了自动化构建的原理和步骤，那么结合我们现在的前端开发工作，我们的确有很多事情需要构建工具帮我们做，比如：

模块分析引入：现在的前端开发已进入组件化开发阶段，实现组件化开发的方式也很多，比如require和import等，我们希望构建工具自动帮我们完成对组件模块的引入和分析，从而让我们专注于组件开发本身。
模块化规范支持：可以尽可能的支持多种类的模块化规范进行打包，这样我们就不用关注模块化规范不一致的问题。
css编译，自动合成图片
html，js，css资源压缩优化：比如去注释，去空格，js的uglify操作，css压缩等，尽可能让线上资源体积最小化。
html路径分析替换：比如将开发阶段的文件相对路径替换成绝对路径或者线上CDN路径。
区分开发和上线目录环境：开发和线上环境的资源可能不一样。
异步文件打包方案：比如解决移动端的首屏加载问题，可以将非首屏的组件打包成异步资源，以按需或者异步的方式加载。
文件目录白名单设置：比如提供一些配置绕过不需要处理的文件目录，以加快构建速度。

entry	入口起点(entry point)，指示 webpack 应该使用哪个模块，来作为构建其内部_依赖图_的开始。
output	告诉 webpack 在哪里输出它所创建的_bundles_，以及如何命名这些文件，默认值为`./dist`。
loader	让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
plugins	loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

比如下面的这些webpack常见的loader和plugins，就可以对项目的文件做各种转换和处理。

插件或loader	功能
html-loader	将HTML输出为string
html-webpack-plugin	当使用webpack打包时，创建一个html文件，并把webpack打包后的静态文件自动插入到这个html文件当中。
file-loader	处理图片
@babel/core, babel-loder, @babel/preset-env	处理js文件
style-loader, css-loader, sass-loader, mini-css-extract-plugin	处理scss等文件