webpack學習筆記 (一)

?

一、安裝nodejs；

點擊打開nodejs官方站點；

點擊下圖框住的按鈕，下周nodejs安裝包；

安裝下載好的安裝包。

安裝完畢之后，在cmd中輸入node -v查看是否已經安裝成功?
?
如果有版本號顯示，則代表安裝成功！！！

?

二、使用nodejs自帶的npm，安裝cnpm（淘寶鏡像）

在cmd中輸入npm install -g cnpm –registry=https://registry.npm.taobao.org?

即可將npm指向國內鏡像源，之后輸入cnpm -v?
?
接下來我們就可以用cnpm代替npm了

?

三、使用cnpm安裝webpack

在cmd中輸入cnpm install webpack -g

在cmd中輸入webpack -v

表示安裝完畢！

?

四、新建項目

新建文件夾webpacktest

?

五、打開cmd，打開新建項目文件夾

?

六、初始化cnpm

在cmd中輸入cnpm init

在文件夾下出現package.json

??表示完成初始化

?

七、在目錄下安裝webpack

在cmd中移到項目下，輸入 cnpm install webpack?

?

八、安裝css-loader和style-loader

在cmd中輸入cnpm install css-loader style-loader安裝（在項目下安裝）

安裝完畢以后，就可以使用webpack處理css了

?

九、安裝插件?webpack-dev-server

# 安裝

cnpm install webpack-dev-server -g

# 運行

webpack-dev-server --progress --colors

在cmd中輸入webpack-dev-server -v

表示安裝完畢！

我們使用 webpack-dev-server 開發服務，這樣我們就能通過 localhost:8080 啟動一個 express 靜態資源 web 服務器，并且會以監聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽項目中的頁面和編譯后的資源輸出，并且通過一個 socket.io 服務實時監聽它們的變化并自動刷新頁面。

?

未完待續~

?