webpack學習筆記 (一)

 

1、安裝nodejs；

點擊打開nodejs官方站點；

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

安裝下載好的安裝包。

安裝完畢以後，在cmd中輸入node -v查看是否已經安裝成功 
 
若是有版本號顯示，則表明安裝成功！！！

 

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

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

便可將npm指向國內鏡像源，以後輸入cnpm -v 
 
接下來咱們就能夠用cnpm代替npm了

 

3、使用cnpm安裝webpack

在cmd中輸入cnpm install webpack -g

在cmd中輸入webpack -v

表示安裝完畢！

 

4、新建項目

新建文件夾webpacktest

 

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

 

6、初始化cnpm

在cmd中輸入cnpm init

在文件夾下出現package.json

  表示完成初始化

 

7、在目錄下安裝webpack

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

 

8、安裝css-loader和style-loader

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

安裝完畢之後，就可使用webpack處理css了

 

9、安裝插件 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 服務實時監聽它們的變化並自動刷新頁面。

 

未完待續~