目錄

第一章 nrm的使用

1.1 兩個cnpm的區別

第二章 什麼是webpack

2.1 為什麼需要webpack

2.2 webpack簡介

第三章 webpack的基本使用

        3.1 webpack的安裝

        3.2 webpack小專案示範

                  3.2.1 webpack小專案的結構

        3.3 構建專案

                  3.3.1 main.js

3.3.2 主頁

3.3.3 專案小結

第四章 webpack的最基本的配置檔案的使用

第五章 webpack-dev-server的使用

5.1 基本使用

5.2 web-pack-server引數的配置

5.2.1 自動開啟瀏覽器並修改埠號

5.2.2 以src作為跟目錄

5.2.3 熱過載

5.3 webpack-dev-server配置命令的第二種方式

5.4 html-webpack-plugin的兩個基本作用

第六章 loader

6.1 配置處理CSS樣式表的第三方loader

6.2 分析webpack呼叫第三方loader的過程

6.3 處理less檔案的loader

6.4 配置處理scss檔案的loader

---

第一章 nrm的使用

1.1 兩個cnpm的區別

nrm中儲存的cnpm僅僅是一個地址

通過npm i cnpm -g 這樣安裝cnpm是一個裝包工具

 

第二章 什麼是webpack

2.1 為什麼需要webpack

 一般瀏覽器根據地址向伺服器拿到的資源只是個html頁面,然後瀏覽器要從上到下解析每一個html標籤,當解析到一個srcipt標籤,發現一個src屬性,會發送一個二次請求,當發現一個樣式標籤,又會發送二次請求.知道結束.

在網頁中點選一個選單,需要匯入bootstrap包,bootstrap包又依賴於我們的jquery包.網頁上有很多複雜依賴關係.

2.2 webpack簡介

可以看到webpack的官方網站的圖片

可以將專案進行打包(bundle),左側是未打包之前的專案結構,js依賴於.hbs,.hbs又依賴於另一個js,關係很複雜,同時瑣碎的資源很多,經過webpack的處理後,依賴關係基本沒了,同時瑣碎的資源也少了很多.

 

第三章 webpack的基本使用

3.1 webpack的安裝

一條命令就可以了,我這裡因為裝了cnpm工具,所以用的是cnpm安裝的

3.2 webpack小專案示範

3.2.1 webpack小專案的結構

src存放原始碼

main.js是專案的入口檔案

index.html是專案的主頁

dist是專案的釋出目錄

3.3 構建專案

首先對專案進行初始化,專案初始化後會在專案底下生成一個package.json

我們的專案要用到jquery,我們進行安裝.關於-S 是什麼可以詳見https://www.jianshu.com/p/2e7f3b69e51e

安裝完後,專案底下會出現node_modules,最後專案的結構如下圖

3.3.1 main.js

我們的隔行變色需要jquery,但是為了少進行二次讀取,我們把專案需要匯入的包都寫進main.js中,這樣專案只用匯入一次就可以了

在main.js中匯入jquery並讓$接收

 

隔行變色程式碼

但是由於是ES6程式碼,瀏覽器可能因識別不了而報錯.使用node語法,執行來匯入瀏覽器也不能識別.

面對這種情況,我們可以用webpack對js做一層處理,並輸出到dist資料夾下.在這之前我們先要裝一下webpack-cli

 裝完webpack-cli後,找到package.json,在scripts下加入dev和build兩個命令

"dev": "webpack --mode deveplopment",
    "build": "webpack --mode production"

效果如下:

 然後在src下新建index.js檔案,這個會被自動打包成main.js放到dist中,可以執行npm run dev或者npm run build.如果遇到錯誤可以參考https://blog.csdn.net/lplife/article/details/80650993,或者參見下圖

 

npm run dev是開發環境,會把要打包的檔案按原來的形式輸出,而不是壓縮輸出,npm run build會把要打包的檔案壓縮輸出.

最後輸入webpack .\src\main.js -o  .\dist\bundle.js命令進行打包,黃字代表還有點問題,接下來會進行配置,大家理解意思就好....

 

3.3.2 主頁

在主頁中,我們將剛才打包的bundle.js匯入

開啟看效果

3.3.3 專案小結

我們正常的js中是不能引入別的js檔案的,但是webpack這個幫我們引入了,所以它能做到下面的第一條.

 

第四章 webpack的最基本的配置檔案的使用

我們在上面打包了main.js檔案,如果我們修改了main.js的話就要重新打包有點麻煩,我們想直接輸入webpack進行打包,所以我們要進行如下配置.

1.在webpack底下建立webpack.config.js檔案

2.填寫如下內容

因為4.0版本的新特性,要指定模式,所以我們需要在exports下,新新增.

輸入webpack,打包成功

 

第五章 webpack-dev-server的使用

5.1 基本使用

在第四章中我們發現,我們每次更改完還是要用webpack再打包一次,還是有點麻煩,所以我們希望修改完能直接編譯執行.

我們這裡需要用webpack-dev-server工具,以下四點需要注意.

對於第三點,我們可以再package.json中的scripts中的dev中配置一下,類似下圖,這樣我們每次執行npm run dev就會執行webpack-dev-server命令,然後我們就可以在本地運行了.

對於第四點,即使我們已經配置了全域性的webpack,我們也需要在本地安裝一個webpack,所以我又在本地安裝了webpack.

做完後就可以npm run dev來直接運行了,執行後我每次修改專案都會自動編譯.

 編譯完成後我們訪問我們的頁面發現並沒有進行修改,原因是我們在頁面中引入的bundle.js的位置不是webpack-dev-server幫我們打包的bundle.js,也就是說下圖的目錄是不對的

真正打包好的bundle.js應該是在專案的根目錄下,即跟dist,src等資料夾平級

 但是我們卻並沒有發現在根目錄下有此檔案,原因如下圖.

 所以我們程式碼應改為

訪問地址為:

 

5.2 web-pack-server引數的配置

5.2.1 自動開啟瀏覽器並修改埠號

5.2.2 以src作為跟目錄

 

5.2.3 熱過載

1.不經過重新整理直接修改頁面

2.不是重新生成所有程式碼,而是在原有程式碼的基礎上進行修改,下圖為生成的修改檔案.

5.3 webpack-dev-server配置命令的第二種方式

不在dev中配置,而是另起一個變數,直接上圖了...

第二步是引入webpack模組

 

5.4 html-webpack-plugin的兩個基本作用

 

 

第六章 loader

6.1 配置處理CSS樣式表的第三方loader

我們想在main.js中匯入css檔案,

 

 

 

6.2 分析webpack呼叫第三方loader的過程

 

6.3 處理less檔案的loader

 

6.4 配置處理scss檔案的loader