webpack4.0(四) --css樣式及圖片打包(style-loader,css-loader)

一、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

    //jpg,gif,png,css....所以文件都需要單獨的loader
    //通過loader加載文件 轉換未webpack能夠識別的moudle
    //模塊對象
    module:{
         // 規則
        rules:[
            {
                // 正則匹配所有以.css結尾的文件
                test:/.css$/,
                 // 使用css-loader和style-loader依次對css文件進行處理
                // 按照數組中從后往前的順序
                use:[devMode?'style-loader'，'css-loader',]
            },
            
        ]
    },

 

4、html文件和style.css

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

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

編輯

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

5、運行

運行自己自定義的腳本命令,然后自動打開了網頁
npm run dev

 

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

如果要重新修改樣式等的東西，只需要到css文件里修改在點擊保存  熱更新自動更新（不需要重新打包）

 二、圖片打包　　　　　　　　　　　　　　　　　　　　　　　　

　 　 圖片打包關鍵要用到file-loader或url-loader，其中url-loader與file-loader功能基本一致，只不過url-loader能將小於某個大小的圖片進行base64格式的轉化處理。

1、CSS中寫圖片

　　 我現在在src目錄下新增一個images文件夾，再在images中添加一張圖片“ccc.png”。然后我在style.css中添加以下代碼：

 　　

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

　　 

2、安裝　　

npm i file-loader -D

 3、配置webpack.conf.js

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

 

4、運行

npm run build   dist目錄下會打包一個images文件夾  

 

 

npm run dev ：

 

 

 

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

 

 

 

總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　

 

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

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