学习webpack,有的时候想起来会一头的懵逼,有一种无从下手的感觉,webpack到底要怎么学,学完要怎么用?可能这就是不太了解webpack的本质的原因吧。
首先:3w1h分析一波 (划重点,面试会问)
what??(什么是webpack)
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
why??(为什么要用webpack)
今天的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法
1.模块化,让我们可以把复杂的程序细化为小的文件;
2.类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能换装换为JavaScript文件使浏览器可以识别;
3.scss,less等CSS预处理器
这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类工具的出现提供了需求。
where??(在哪里用webpack)
目前前端最火的三大框架:Vue、Angular、React全部都是用webpack构建的,当然,也不仅限于此,如果需要,我们可以就写一个index.html,也可以用webpack构建起来,做到打包、压缩、热更新、等等一系列的操作......
WebPack和Grunt以及Gulp相比有什么特性?
其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。
how??(如何使用webpack)
准备工作:nodejs安装、yarn安装
安装node: nodejs官方网站
安装yarn:npm install yarn (不懂的请自行百度yarn)
node -v / yarn -v (确定node和yarn安装成功,正确弹出版本号)
案例node版本10.13.0
案例yarn版本1.12.3
webpack基本属性
module.exports = { mode: '', entry: '', output: '', plugins: [], module: [], resolve: '', devServer: {} }