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目錄加入

QQ截圖20170501233806.jpg

2. 將NODE_PATH加入系統變量的Path

  • 后面拼接 ;%NODE_PATH%;

    • 如果前面已經有了分號,則前面的分號不需要

QQ截圖20170501234054.jpg

3.確定后重啟CMD,再次執行webpack就不會提示不是內部命令

QQ截圖20170501234205.jpg

4.對hello.js的打包也沒問題

QQ截圖20170501234215.jpg

一切的一切都是 Path的原因

不僅僅是webpack,如果path不對,其他npm的module也沒辦法跑


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM