windows下使用webpack的完美解决方案

之前一直在linux下使用node.js以及webpack，因为我的ubuntu kylin是装在虚拟机上的，最近使用webpack的细节的东西比较多，就想搞在windows上，不搞不知道，简直头疼死我了。

主要是webpack（或者其他的modules）。

零、windows下配置npm

node.js以及npm就不多说了，windows直接安装即可.

不建议安装在C盘，当然如果 node_global 和 node_cache 不在C盘就无所谓了。

安装成功后，会加一个PATH，这样子可以直接在cmd中使用命令：

$ node -v 
$ npm -v

来查看版本号，如果这个都无法运行，那一定是PATH出了问题，可以卸载重装。

• 所有的命令都在cmd跑就OK

配置NPM

1. 配置使用淘宝镜像

一般我不习惯使用cnpm，而且本文的问题没解决之前，也不能使用cnpm，直接将npm的镜像配置成淘宝的就行了。

# 配置淘宝镜像
$ npm config set registry https://registry.npm.taobao.org
# 可以使用 npm config get registry查看当前的配置

2. 配置node_global和node_cache

• 一般我选择在安装目录下建立 node_global 和 node_cache 两个文件夹
• 在 node_global 中建立 node_modules 文件夹
• 下面的命令使用的是完整的路径 X:/xxxxx/xxxxx/node_global

# npm配置node_global和noed_cache
$ npm config set prefix "X:/XXXX/XXX/node_global"
$ npm config set cache  "X:/XXXX/XXX/node_cache"

一、问题

（前提：node以及npm都能使用且已经配置好了）

1. 在一个文件夹下创建一个目录，如 webpack_test
2. 进入该目录并且运行cmd
3. 初始化

$ npm init

1. 局部安装webpack,并一路回车

$ npm install webpack --save-dev

上面操作执行后，会出现 node_modules 以及 package.json两个文件

1. 创建 hello.js 文件，随便写点儿东西
2. 打包hello.js

$ webpack hello.js hello.bundle.js 

问题出现在这里，会提示你 webpack不是内部命令

然后网上有人说需要全局安装 webpack

1. 全局安装webpack

$ npm install webpack -g

安装成功后，再次执行webpack命令，发现依旧无法运行，而网上的诸多所谓解决就没下文了

二、原因

出现问题的原因网上很多所谓的方案都有说，其实也很明确，出现命令无法运行，而且已经全局安装了，一定是path的原因

path出错的根本原因是：

全局安装的 node_modules (就是上面在 node_global 中创建的文件夹)没有正确的加入path

所以跑什么都跑不来。

三、解决

知道了问题所在就好办了，直接将 node_global/node_modules 加入path即可。

为了以后重装方面，多添加一个系统变量。

(不知道如何打开和配置环境/系统变量的出门左转百度)

1. 创建系统变量 NODE_PATH,将上面的完整的node_modules目录加入

2. 将NODE_PATH加入系统变量的Path

• 后面拼接 ;%NODE_PATH%;

  • 如果前面已经有了分号，则前面的分号不需要

3.确定后重启CMD，再次执行webpack就不会提示不是内部命令

4.对hello.js的打包也没问题

一切的一切都是 Path的原因

不仅仅是webpack，如果path不对，其他npm的module也没办法跑