各位好!我是萝卜不带泥,这是我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包管理平台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 register.npm.taobao.org 设置npm默认使用淘宝镜像,也可以使用命令npm install -g cnpm --registry=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的零配置打包。喜欢萝卜萝卜不带泥的文章就关注吧!