cnpm安装webpack_30分钟入门 webpack4 一（安装篇）

一、什么是webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器。(好吧！我也知道这是官方的一个名词解释，但我们暂时只要记住静态模块打包器就行了。)

但是静态模块、打包器又是什么鬼？

我们知道前端开发过程中的图片、样式表、js、html模板等文件我们都称之为静态资源，这些资源在webpack中称为静态模块。

所谓的打包器，意思就是能将这些资源文件合理的、稳妥的进行批量处理，比如说压缩图片、合并压缩js与样式等。想要实现这样的效果，我们只需要对webpack进行相应的配置就可了。

所以webpack完全就是一个工具，一个简化和优化前端开发人员代码、提高前端开发人员工作效率的工具。

二、安装webpack

1、安装Node.js，以及cnpm

安装webpack之前需要安装Node.js，这部分内容大家可以去node.js的官网查看，这里需要说明的是我们最好是安装node的LTS(长期支持版本)版本，这个版本的好处就是官方长期维护，而且稳定错误少。

安装webpack之前我们还需要注意什么是npm 以及如何使用cnpm。

npm 是随着node.js安装的一个包管理工具，全名是Node Package Manager，通过npm可以安装、共享、分发代码、管理项目依赖等，我们也可以把它简单的理解为一个终端的命令(反正我是在命令行中把它当命令来使唤的)。

cnpm和npm的功能一样，那么我们为什么还要使用cnpm呢？这是因为国内用户在使用npm安装一些插件或者代码时速度缓慢甚至根本链接不上，这个时候我们可以使用cnpm来管理我们的项目依赖。

那么问题又来了，npm是安装node.js时自动安装的，那么cnpm又如何安装呢？

首先，windows系统打开命令行工具(我们也叫它Dos窗口)，苹果系统下也有一个命令行工具。其实安装完node.js后它自己也带一个Node.js command prompt工具，打开它也是一样的，如下图：

其次，输入下面的命令，这个命令其实就是安装了一个cnpm 管理工具，这个工具的作用就是安装相关插件或者代码时候使用淘宝镜像中对应的内容，这样下载速度和安装速度就会很快了。

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、在项目中安装webpack

假设我们有一个文件夹叫mywebpack，这就是我们整个项目的文件夹，然后使用命令进入到项目文件夹的目录下运行如下命令：

npm init -y

运行后的结果如下图：

其实这个命令的作用就是在项目的目录下创建了一个package.json的文件，这个文件记录了一些项目信息，例如项目的名称、版本、描述、作者，项目依赖等，在以后我们通过npm或者cnpm安装相关插件或者依赖的时候它里面会做相应的记录。

这个文件其实不光是记录了项目的相关信息，他的最大作用是让其他人能更好的安装和部署开发环境，例如其他同事要拷贝这个项目进行开发，他只要把相关的内容拷贝过去后(包括package.json)只要在命令行执行如下命令就可以了，不用考虑项目中以前安装过什么东西。

npm install//或者cnpm install

接下来是要安装webpack了，我们所学习的是webpack4，它和以前的版本有很大的差别，不光要安装webpack还要安装webpack-cli，分别运行如下命令：

cnpm install webpack --save-devcnpm install webpack-cli --save-dev

--save-dev 参数其实就是告诉cnpm命令在安装插件或者依赖的时候，将需要安装的东西的名称以及版本号记录到package.json中的devDependencies中。

这时候回过头看package.json文件我们会发现其内容中在devDependencies下面多出了两个内容，一个是记录了webpack和它的版本，一个是webpack-cli和它的版本，如下图：

webpack简单的环境配置以及安装已经完成，下一篇主要对webpack中入口起点和输出进行简单说明。