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

385 阅读3分钟

各位好!我是萝卜不带泥,这是我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的零配置打包。喜欢萝卜萝卜不带泥的文章就关注吧!