sunshine小小倩，某一线互联网公司资深前端开发工程师。平时在工作中除了业务之外，还从事和前端基础建设相关的工作内容，包括团队 SOP 制定、内部组件库的搭建和维护，以及其他为开发提效的工作。同时，也有一些前端性能提升等工程化的实践。
\n平时热衷于将自己的经验和踩过的坑跟大家分享，希望能给大家带来帮助。
\n现在的前端开发已经和 5 年前的前端开发有着截然不同的要求。在 5 年前我刚毕业找第一份工作的时候就问了我一个问题：“页面上有一个 button，你能把上面的文案给改了吗？” 相信 5 年后的今天，你只会修改一个 button 的文案是找不到工作的。时至今日，大家在找工作的时候基础问题都是：“Vue 实现双向绑定的原理是什么？Webpack 是怎么进行打包的？plugin 和 loader 的区别是什么？……”
\n前端开发最开始只是嵌入在模板引擎中对页面样式进行修改再加上一些简单的 DOM 操作，后来慢慢发展为可以处理复杂交互和业务逻辑。特别是随着 Ajax、Node 等新技术的发展，前端开发也逐渐具备了开发中大型业务的能力，这无疑标志着前端已经步入工程化的阶段。
\n这也意味着对我们的要求已经不再是“前端开发”，而是 “前端工程师”，时代要求我们要有工程化的思维和工程化解决问题的能力。
试想一下，某一天一个线上问题反馈说有的用户出现了白屏，你一通查找，结果发现是一个最新的语法在旧的浏览器上不支持。但是明明你的项目中用了 Babel 呀！打开编辑器，对着 babel.config.js 文件看了半天也没看出来个所以然来。于是你又打开 Google 搜索“怎么配置 Babel？”，会搜索到要安装一大堆 npm 包，配置 transform-runtime、babel-polyfill……按照第一篇文章配置之后，发现不生效，又换一篇文章，接着更改配置。终于，在快则 2 个小时，慢则一天的尝试之后，终于解决白屏问题了！此时，虽然你也不知道是改动的哪一行代码生效了，也不知道为什么要这么配置，但是知道要赶紧按下保存按钮，生怕修改了配置又出问题！并且祈祷下次千万不要有类似的问题报过来了！！ 然后又匆匆忙忙重新回到项目中赶工期，至于出问题的原因，下次一定……下次一定……
上面这个场景你是不是很熟悉？估计也戳到了很多技术人的痛处。这可能就是我们某些技术人开发的日常，被繁琐的 webpack 或者其他的 babel 、ts 的配置文件搞得一头雾水。总结来说，就是：
\n以上的种种现象说明：你前端工程化的知识欠缺。
那么本小册将着重就现代前端开发，来详细介绍前端工程化的相关内容，并且带领大家用专业知识来解决前端工程问题，包括如何进行模块化、如何设计组件、如何提高代码的复用性、如何提升打包效率、如何做性能优化等。毕竟，现如今，只是会 HTML、CSS、JS 写写静态页面的时代已经过去了。
本小册主要是从开发、构建和部署这三大阶段来构思的，整体的思维导图可参考如下：
\n期望大家学习完本小册之后，能够有以下收获：
\n本小册适合工作 1～3 年的初级前端工程师。比如，存在以下这些“症状”：
\n