细说webpack 2. webpack 开发环境搭建

各位好！我是萝卜不带泥，这是我webpack系列文章的第二篇，上一篇介绍了为什么要使用webpack，这一篇主要讲解webpack的环境搭建，包括：npm node webpack 的安装，已经准备好的环境的同学可以略过，直接看我的下一篇文章了。

安装nodejs

首先进入nodejs的官网，选择对应系统的下载包进行下载安装即可，注意要选择LTS版本。

nodejs版本管理

如果小伙伴们使用的电脑是Mac或者Linux系统，推荐使用node的n模块来对node版本进行管理，如果小伙伴们使用的windows的系统nvm的windows版本对nodejs进行版本管理。

nodejs包管理工具

npm是nodejs最流行的包管理工具，与之对应的还有yarn，我们平时在使用nodejs进行开发时，可以将写好的代码打包发布到javascript包管理平台http://npmjs.org上，当项目需要某个包或者模块时，可以直接使用包管理工具安装对应的包，npm中使用package.json的文件作为一个npm包的描述文件，文件中包含了名称、版本号、描述、作者等基本信息以及依赖关系。

npm的常用命令

安装和删除

• npm install packageName 简写npn i packageName
• npm install packageName@<version> 安装指定版本的包，如果项目目录下有package.json文件则可以直接用npm install安装所有项目所需的依赖。
• npm install packageName --save 简写 npm i packageName -S安装依赖包并将依赖包写入package.json。
• npm intstalll packageName --save-dev 简写 npm i packageName -D 安装依赖包并写入开发依赖中。
• npm uninstall packageName 删除某个依赖包。

本地模式和全局模式

npm安装的包分为本地模式和全局模式，默认是本地模式，全局安装一个包，使用命令npm install --global packageName 简写 npm i -g packageName

初始化一个NPM项目

通过npm init 命令初始化一个新的项目，会生成一个新的package.json文件，可以通过npm init -y跳过提问阶段，直接生成一个 package.json文件。

设置npm镜像

npm网站不稳定，可以通过配置国内的镜像来解决这个问题，淘宝npm镜像是国内最大的一家npm镜像网站，可以通过npm config set registery https://register.npm.taobao.org 设置npm默认使用淘宝镜像，也可以使用命令npm install -g cnpm --registry=https://register.npm.taobao.org 之后直接像使用npm一样使用cnpm即可。

安装webpack以及webpack-cli

推荐将webpack以及webpack-cli安装到项目目录下，不推荐全局安装webpack以及webpack-cli，原因是可防止不同的项目因依赖不同版本的webpack而导致冲突。

• npm i -D webpack 安装最新的稳定版；
• npm i -D webpack@<version> 安装指定版本；
• npm i -D webpack@beta 安装最新的体验版本；

到此，就准备好了webpack的命令行开发环境了，下一次将介绍webpack-cli的零配置打包。喜欢萝卜萝卜不带泥的文章就关注吧！