webpack学习

Posted 2020-08-13 小虫虫

1.前端工程化

最近几年，前端（自动化）构建工具大受欢迎。对于初学者，首先应该了解为什么要用这些工具，或者说，使用这些工具的目的（作用）是什么，再或者，这些工具能让我们干一些什么事情？

笔者以为，既然是“工具”，必定是在一定程度上解放我们的双手的。

这些工具的产生背景是，当下的前端项目越来越复杂，需要管理的资源越来越多。对于小项目，自然不需要这些工具。这些工具一般能完成前端开发流程中的重复工作的一项或几项。工程化的含义有系统，完整性的意思。借助这些工具，我们完成前端工程化，让流程更规范、标准。

2.常见的前端工程化工具

不了解一个行业的职业要求，最好的办法是看职位招聘。近年来，前端这块的招聘的要求有了对前端工程化工具掌握的要求。

通过搜寻，最常出现的工具是：Grunt、gulp、webpack、yeoman、bower。其中：

yeoman是脚手架工具：是用来生成项目的

bower是包管理工具

Grunt、gulp、webpack的作用类似，压缩代码，打包资源等。

无论哪种前端构建工具，都是通过npm包管理的。如果本机上安装有nodejs，就有了npm包。客通过查看npm的版本，检查是否安装有npm

npm -version

在已经安装npm的系统中，安装各种工具非常简单：npm install命令即可安装想要的工具。

学习这些前端工具，无疑要对NodeJs要了解。这些工具的配置文件就涉及NodeJs的知识。前端发展到今天，对NodeJs的掌握成了优秀前端的必备技能吧。NodeJs毕竟是服务端语言，和其他的服务端语言java,php一样，都涉及对文件、请求等的处理。如果熟悉Js，还是需要学习很多，路比较长。

3.webpack

webpack顾名思义，肯定有"打包"的功能。除此之外，它还将所有的静态资源视为模块。css是模块，图片也是模块。这也符合nodejs的理念。

由于 webpack跟react项目结合的很好，笔者第一个接触的前端构建工具就是这个。webpack是基于配置的，对使用者来讲，我们需要掌握这些配置。