一、CSS樣式打包　　　　　　　　　　　　　　　　　　　　

1. loader簡介

由於Webpack打包入口目前只配置了一個index.js檔案，那麼其他需要被打包的檔案都必須通過模組化方式引入該檔案才行，而預設情況下，引入的檔案必須是js檔案（如專案裡新增的index.js）。

那麼其他檔案型別該如何進行打包呢？這時我們就要用到webpack中所提供的各種loader，它就是專門用於處理除JS檔案之外的其他格式檔案的編譯、提取、合併、打包等。

其中CSS檔案的打包需要用到style-loader和css-loader這兩個依賴包，style-loader用於將打包後的css程式碼<style>標籤形式新增到頁面頭部，css-loader用於載入css檔案。

2、安裝

npm i css-loader style-loader -D

3、配置webpack.conf.js

 1     //jpg,gif,png,css....所以檔案都需要單獨的loader
 2     //通過loader載入檔案 轉換未webpack能夠識別的moudle
 3     //模組物件
 4     module:{
 5          // 規則
 6         rules:[
 7             {
 8                 // 正則匹配所有以.css結尾的檔案
 9                 test:/.css$/,
10                  // 使用css-loader和style-loader依次對css檔案進行處理
11                 // 按照陣列中從後往前的順序
12                 use:[devMode?'style-loader'，'css-loader',]
13             },
14             
15         ]
16     },

4、html檔案和style.css

第一步：src目錄中編輯index.html

第二步：手動在src目錄建style.css檔案再編輯

編輯

第三步：在src目錄index,js中引入style.css

5、執行

1 執行自己自定義的指令碼命令,然後自動打開了網頁
2 npm run dev

 可以看到自己剛剛編寫的html和css樣式

如果要重新修改樣式等的東西，只需要到css檔案裡修改在點選儲存  熱更新自動更新（不需要重新打包）

 二、圖片打包　　　　　　　　　　　　　　　　　　　　　　　　

　　這樣直接打包，肯定是會報錯的 下圖寫著圖片不能被解析，我們需要用一個裝一個loader外掛，來處理圖片的解析。

2、安裝　　

npm i file-loader -D

 3、配置webpack.conf.js

1 {
2                 test:/\.(jpg|png|jpeg|gif)$/,
3                 use:['file-loader'],//其實對於只有單個loader的，可以將其簡化loader:'file-loader',  
4                 options:{
5                     //name屬性其實就是圖片打包後的路徑，其中包括圖片名（[name]）和圖片格式（[ext]）。
6                     name:'./images/[name].[hash].[ext]'
7                 }
8                 
9             },

4、執行

npm run build   dist目錄下會打包一個images資料夾  

npm run dev ：

這樣圖片已經成功寫進網頁裡了。

總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　當我們配置watch為true進行打包後，Webpack會一直處於監聽狀態，然而當更改webpack.config.js後我們仍需要重新進行打包操作，這時我們只需在控制檯簡單的按下Ctrl+C後根據提示輸入字母y回車確定即可成功退出監聽狀態。

　loader解決了在打包過程中打包圖片，樣式，視訊，音訊等無法解析的問題，進一步解決了我們的問題。