webpack实践之路（一）：安装

• webpack实践之路（一）：安装
• webpack实践之路（二）：快速上手的Demo
• webpack实践之路（三）：快速上手的Demo2.0
• webpack实践之路（四）：管理资源
• webpack实践之路（五）：管理输出
• webpack实践之路（六）：让开发更便捷
• webpack实践之路（七）：模块热替换HMR

---

一、什么是WebPack？

---

WebPack可以看做是模块打包机：它会分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。现在Webpack还肩负起了优化项目的责任。

上面的话有三个重点：

• 打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
• 转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
• 优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任

我们可以从下图再次了解一下WebPack的作用:

二、安装WebPack

---

注：我用的是linux，由于权限问题，所以很多命令前加上了sudo

---

1、全局安装webpack

打开终端，创建 文件夹webpack_demo

> mkdir webpack_demo
> cd webpack_demo

需要注意的是,你在执行下一步时必须安装node，可以通过 node -v来查看node安装情况和版本，如果没有安装，要先安装node才可以继续进行。

//全局安装
> sudo npm install -g webpack

如果你这时安装失败了（出现了报错信息），一般有三种可能：

• 检查你node的版本号，如果版本号过低，升级为最新版本。
• 网络问题，可以考虑使用cnpm来安装（这个是淘宝实时更新的镜像）,具体可以登录cnpm的官方网站学习http://npm.taobao.org/
• 权限问题，在Liux、Mac安装是需要权限，如果你是Windows系统，主要要使用以管理员方式安装。

注意：全局安装是可以的，但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

2、对项目目录进行安装

全局安装完成后，我们还要进行一个项目目录的安装。在用npm安装前，我们先要进行一下初始化，初始化的主要目的是生成package.json文件
(package.json包括当前项目的依赖模块，自定义的脚本任务等等）

在终端输入如下，进行初始化：

> sudo npm init

输入完成后，npm终端会问你关于项目的名称，描述……一堆内容，如果你不考虑发布到npm上，这些内容都不重要，而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。

再进行项目目录的安装：

> sudo npm install --save-dev webpack

参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。

我们使用的是 webpack 4+ 版本，所以还需要安装 CLI：

> sudo npm install --save-dev webpack-cli

开发环境 与 生产环境：

• 开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。
• 生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。

3、查看webpack版本

我们用下面命令查看webpack版本:

> npm info webpack		//所有详细信息

或

> webpack -v			//仅版本信息

通过下图看到，当前webpack版本为 4.27.1

---

总结

（1）如果你想全局安装，那就按上面：
先全局安装 --> 再初始化init --> 再本地目录(局部)安装

> sudo npm install -g webpack
> sudo npm init
> sudo npm install --save-dev webpack
> sudo npm install --save-dev webpack-cli

（2）如果你只想本地安装：（推荐）

> npm init -y
> sudo npm install webpack webpack-cli --save-dev