02-配置开发环境

当前开发环境的的版本

MacOS命令行工具 https://www.iterm2.com/

Linux命令行工具 https://ohmyz.sh/

NodeJS https://nodejs.org

安装webpack

首先版本都是@3 版本

npm i webpack -g@3

Webpack -h

具体安装方法：

比如window电脑:

用win+R打开运行对话框，输入cmd进入命令行模式。然后找到你想开始项目的地方，输入下方代码： mkdir webpack_demo cd webpack_demo

第一句是建立一个文件夹，第二句是进入这个文件夹。这个文件夹就是我们的项目文件目录了，文件夹建立好后，可以通过下面命令安装WebPack。 需要注意的是,你在执行下一步时必须安装node，可以通过node -v来查看node安装情况和版本，如果没有安装，要先安装node才可以继续进行。

全局安装

npm install -g webpack@3

如果你这时安装失败了（出现了报错信息），一般有三种可能： • 检查你node的版本号，如果版本号过低，升级为最新版本。 • 网络问题，可以考虑使用cnpm来安装（这个是淘宝实时更新的镜像）,具体可以登录cnpm的官方网站学习http://npm.taobao.org/。 • 权限问题，在Linux、Mac安装是需要权限，如果你是Windows系统，主要要使用以管理员方式安装。 注意：全局安装是可以的，但是webpack官方是不推荐的。这会将您项目中的webpack锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

对项目目录进行安装

全局安装完成后，我们还要进行一个项目目录的安装。在用npm安装前，我们先要进行一下初始化，初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等，如果你对此文件还不了解，可以看看node 的相关知识）。 在命令行输入： npm init -y 输入完成后，npm终端会问你关于项目的名称，描述……一堆内容，如果你不考虑发布到npm上，这些内容都不重要，而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。 输入下面命令进行项目目录的安装： npm install --save-dev webpack 或者npm i --D webpack 这里的参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。

开发环境and生产环境：

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

查看webpack版本

你安装好后，会想知道你现在webpack版本，在工作中交流时，也会经常问到你，你的打包版本是什么？这时候我们可以用下面的命令进行查看。 webpack -v 可以看到我现在的版本的3.6.0版本，这是目前（2017/9/16）最新的版本了。出现了版本号，也说明你的webpack安装成功了。