Webpack工程化学习 02 Webpack开发环境搭建

1.开发环境

• NodeJS
• NPM
• Webpack

2.NodeJS

2.0 安装NodeJS

• Windows：可以直接在官网下载安装包
• MacOS：可以使用brew（the missing package manager）

2.1 NodeJS版本管理

NodeJS有稳定版和开发版，不同的项目，需要的NodeJS版本可能也不同，可以使用版本管理工具来切换所需版本。

• Windows：nvm-windows、tnvm
• MacOS：模块n

2.2 NodeJS包管理工具

JS包管理平台npmjs.com，我们可以直接使用包管理工具来安装和下载对应的包；我们也可以免费注册一个账号，发布自己的公共包和私有包供其他人使用。

NPM是围绕语义版本控制（semver）思想而设计的。

版本格式：主版本号.次版本号.修订号，版本号递增规则如下：
主版本号：当你做了不兼容的 API 修改，
次版本号：当你做了向下兼容的功能性新增，
修订号：当你做了向下兼容的问题修正。

NPM使用package.json的文件作为一个NPM包的描述文件，package.json包含了包的基本信息（名称、版本号、描述、作者等）和依赖关系。

3.NPM的常用命令

3.1 安装和删除

// 安装至 dependencies
$ npm install packageName
$ npm install [email protected]
// 安装至 dependencies 简写
$ npm i packageName
$ npm i [email protected]
// 安装至devdependencies
$ npm install packageName --save-dev
// 安装至 devdependencies 简写
$ npm i packageName -D
// 删除NPM包
$ npm uninstall packageName

3.2 本地模式和全局模式

• NPM包安装分本地模式和全局模式。
  • 本地模式安装npm install ...。
  • 全局模式安装npm install --global ...，可以简写为-g。
• NodeJS在查找依赖的时候，会优先查找当前文件的node_modules（本地模式安装的包），如果没有，则循环遍历上层的node_modules，如果遍历到根目录还不到，则会使用全局模式安装的模块。

3.3 初始化一个NPM项目

$ npm init

以上初始化语句会生成一个新的package.json文件。

3.4 设置NPM镜像

3.4.1 单次镜像

$ npm [命令] --registry=https://registry.npm.taobao.org

3.4.2 默认使用淘宝镜像

$ npm config set registry https://registry.npm.taobao.org

3.5 NPM其他常用命令

• npm set：设置环境变量。npm set init-author-name 'Your name'，初始化的时候会使用默认环境变量。
• npm info：查看某个包的信息。npm info lodash。
• npm search：查找NPM仓库。npm search webpack。
• npm list：树形展现当前项目安装的所有模块，以及对应的依赖。

3.6 NPM Scripts

NPM不仅可以用于模块管理，还可以用于执行脚本。
在scripts中添加字段，用于指定脚本命令，供NPM直接调用。

// package.json
{
  "scripts": {
    "build": "webpack",
    "serve": "node src/scripts/dev.js"
  }
}

接下去可以使用以下命令

• npm run build
• npm run serve

4.Webpack-cli

• webpack-cli github
• webpack官网 getting-started

4.1 项目内安装（推荐）

$ npm install webpack-cli --save-dev

4.2 全局安装

$ npm install -g webpack-cli