本节知识点
- 介绍webpack的使用
(一) 认识WebPack的作用
现在前端网页功能丰富 特别是SPA(Single page web application 单页应用) 技术流行后,JS的复杂度等价和需要一大堆依赖包，还需要解决SCSS,LESS新增样式的扩展写法和编译工作等等。所以现在的前端已经完全依赖于Webpack的辅助了.
现在最流行的3个前端框架可以说和webpack紧密相连。框架官方都推出了和自身框架依赖的webpack构建工具
react.js+Webpack
vue.js + Webpack
Angular.js+Webpack
由此可见WebPack是你必须要经过的一个门槛
(二) 什么是WebPack
Webpack可以看做是模块打包机。它做的事情就是分析你的项目结构，找到JS模块以及其他的一些浏览器不能直接运行的语言比如(sass,Typescript)，并将其转换和打包为合适的格式供浏览器使用。在3.0出了以后WebPack 还肩负起了优化项目的责任。
简单来说就3个方面
- 打包 : 可以把多个JS文件打包成一个文件，减少服务器压力和下载带宽
- 转换 : 把拓展语言转换成普通的JS让浏览器顺利运行
- 优化 : 提升优化和提升性能的责任
(三) 一张图告诉你webpack的作用
1.png
(四) 安装WebPack
分成两步:
- 第一步是全局安装 类似环境变量。哪里都能使用。不用cd到目录 安装一次即可除非重装系统
- 第二部是本地安装 本地安装就是单指项目
备注为什么需要全局安装后又要本地安装,，因为本地安装引入不了全局的安装包
(i) 全局安装
利用npm 来安装
//全局安装
npm install -g webpack --save
这个时候要是安装失败了可能有3个原因
- 检查 node版本号,升级到最高版本
- 网络问题。可以考虑使用cnpm(淘宝镜像来安装) 具体的参照cnpm官网使用
- 权限问题在 linux 和mac系统下面需要权限
特别注意的就是 全局安装是可以的。但是webpack官方是不推荐的。因为这将会使您的webpack锁定到指定的版本，并且在使用不同的webpack会导致构建失败
(ii)本地安装
- 安装完全局以后 还要安装一下本地。首先需要初始化 npm
-y就表示全部同意，省的按下回车
npm init -y
- 第二部开始安装webpack
npm install webpack --save-dev
--save就是保存到package.json里面 -dev就表示开发时使用这个包而生产环境不使用这个包
- 开发环境和生产环境
开发环境就是我们在开发的时候需要用到的包而生产环境就是我们产品上线后需要安装的包
举例子说明像
模块打包机(webpack)项目上线以后我就不需要了。所以安装的时候就是--save-dev
但是比如像jquery等项目上线后我还需要所以就是--save
(三) 查看webpack版本
webpack -v
这样就能看到你的webapck版本了
