webpack快速入門——CSS中的圖片處理

1.首先在網上隨便找一張圖片，在src下新建images文件夾，將圖片放在文件夾內

2.在index.html中寫入代碼：<div id="pic"></div>來放置圖片

3.設置圖片的css

#pic{
    background-image: url(../images/pic.png);
    width:60px;height:60px;
}

4.編寫完成后，進行打包，這時候會報錯，先不要慌，這是因為缺少file-loader和url-loader

5.安裝file-loader和url-loader，

6.安裝好后，進行配置：

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, {
                test: /\.(png|jsp|gif)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 500000
                    }
                }]
            }
        ]
    }, 

7.配置好后，直接webpack打包就可以了

8.然后直接npm run server 運行 或者使用live-server，點擊紅色框的url

9.即可看到效果

 

 

前端必學內容：webpack（模塊打包器）

webpack3 學習內容，點擊即可到達

(1).webpack快速入門——如何安裝webpack及注意事項

(2).webpack快速入門——webpack3.X 快速上手一個Demo   

(3).webpack快速入門——配置文件：入口和出口，多入口、多出口配置 

(4).webpack快速入門——配置文件：服務和熱更新

(5).webpack快速入門——CSS文件打包

(6).webpack快速入門——配置JS壓縮，打包

(7).webpack快速入門——插件配置：HTML文件的發布

(8).webpack快速入門——CSS中的圖片處理

(9).webpack快速入門——CSS分離與圖片路徑處理

(10).webpack快速入門——處理HTML中的圖片

(11).webpack快速入門——CSS進階，Less文件的打包和分離

(12).webpack快速入門——CSS進階：SASS文件的打包和分離

(13).webpack快速入門——CSS進階：自動處理CSS3前綴

(14).webpack快速入門——CSS進階：消除未使用的CSS

(15).webpack快速入門——給webpack增加babel支持

(16).webpack快速入門——打包后如何調試

(17).webpack快速入門——實戰技巧：開發和生產並行設置

(18).webpack快速入門——實戰技巧：webpack模塊化配置

(19).webpack快速入門——實戰技巧：優雅打包第三方類庫

(20).webpack快速入門——實戰技巧：watch的正確使用方法，webpack自動打包

(21).webpack快速入門——實戰技巧：webpack優化黑技能

(22).webpack快速入門——集中拷貝靜態資源

(23).webpack快速入門——Json配置文件使用

 

如果我的內容對你有幫助，歡迎打賞