NodeJS+Webpack入门：从安装到使用

目录

前言：

1.NodeJS

1.1 NodeJS安装

1.2 修改NodeJS安装模块路径：

​1.3 配置镜像源:

2.Webpack

2.1 Webpack安装

本地安装（推荐）：

全局安装：

2.2 Webpack打包

手动打包：

热部署：

---

前言：

这是一篇从后端开发人员的视角出发，编写的关于NodeJS和Webpack从零开始，从安装到使用的记录，基本上每一步都有注释说明，可放心食用；另外在Webpack打包演示中简单涉及Vue指令的使用，直接复制相应页面即可，不影响Webpack打包的使用；

 

1.NodeJS

NodeJS:基于V8引擎可用于执行JS的平台

npm:包管理工具，用于从NPM服务器上传/下载依赖包；

 

1.1 NodeJS安装

下载地址：https://nodejs.org/en/  推荐LTS版本

备注：LTS:稳定版  Current:最新版

2.安装步骤：一路Next即可（安装路径无中文）

3.确认版本：

node -v

1.2 修改NodeJS安装模块路径：

假设第2步NodeJS安装路径是F:\nodejs\  而通过npm下载的模块包默认在C盘，会造成文件积压在C盘

为了让下载的模块包放在NodeJS安装目录中，需要进行以下步骤：

1.在nodejs根目录中依次创建node_global与node_cache文件夹,并在node_global文件夹中创建node_modules文件夹

2 修改prefix和cache:

在该目录下打开命令窗口，依次执行下列两条命令：

• 设置全局目录

npm config set prefix "F:\nodejs\node_global"  

• 设置缓存目录

npm  config set cache "F:\nodejs\node_cache"

• 配置NodeJS环境变量

先进入  我的电脑-属性-高级系统设置-环境变量

 

添加系统变量：添加NODE_HOME

NODE_PATH                 //名称
F:\nodejs\node_global\node_modules   

修改用户变量：编辑Path,将指向C盘的Npm修改为指向NodeJS的node_global文件夹  

特别提示：修改的是上方的用户变量中的Path

 

 

备注：

1.系统变量中的Path有个指向nodejs的安装路径无需修改；

2.若通过Npm下载的模块在执行时出现不是内部/外部命令，在安装正常前提下，重新检查npm这三处环境变量；