打包HTML文件基礎之webpack配置

 

     以前項目用的VUE腳手架建立建立並打包發佈的，最近新啓動的一個項目，客戶對瀏覽器版本由要求，目前VUE對低版本瀏覽器支持不是特別好，

因此打算直接用HTML進行研發，涉及了wenbpack直接打包HTML文件，按章webpack時遇到了一些問題，查找了一些資料並記錄下來。

1、下載安裝node.js(npm)

由於以前安裝過固跳過此步驟.

二 、配置環境

1.配置文件夾

控制檯輸入npm -v 也能夠查看npm是否成功安裝，安裝成功後出現版本號說明nodejs.npm安裝成功。

個人nodejs是默認安裝路徑C:\Program Files\nodejs，最開始是安裝在其餘盤的，可是配置的時候各類問題，後重裝改成默認路徑

在C:\Program Files\nodejs文件夾內新建兩個文件夾用於全局存放依賴包路徑，和緩存路徑。緩存C:\Program Files\nodejs\node_cache

存放C:\Program Files\nodejs\node_global

文件夾建立完成後打開命令行輸入以下命令 配置路徑：

npm config set cache  "C:\Program Files\nodejs\node_cache"

回車

輸入：
npm config set prefix "C:\Program Files\nodejs\node_global"  回車

2.安裝webpack

webpack分爲全局安裝，與項目安裝（安裝在你指定的文件夾內），我這裏使用的是全局安裝

啓動cmd，鍵入以下的命令：

npm install webpack -g

點擊回車，會有一個進度條，等待進度條完成後，出現以下信息(具體信息可能有差異，可是隻要不出現error說明安裝成功)：

此時，打開nodejs的路徑C:\Program Files\nodejs\node_global文件夾，發現多了一些東西：

 

 此時全局webpack已經成功安裝。

環境變量配置

個人電腦——右鍵屬性——高級系統設置——高級———環境變量 

分別新建用戶變量PATH和系統變量NODE_PATH

這是最重要的一點;在安裝webpack後出現'webpack' 不是內部或外部命令的問題 就是此處設置不對

PATH和NODE_PATH所有設置爲：C:\Program Files\nodejs\node_global。

看到網上的設置方法爲  ：NODE_PATH屬性指向C:\Program Files\nodejs\node_global\node_modules,這樣設置並不對，就會致使報不是內部命令

 按照以上步驟nodejs npm webpack算是真正安裝配置完，而後就能夠直接使用了。

 

webpack打包HTML、JS、CSS

http://www.javashuo.com/article/p-sznaahrn-ct.html