轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack打包圖片資源

一、打包圖片的核心配置

// loader的配置
    module: {
        rules: [
            //打包 css 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader'
                ]
            },
            //打包less 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader',
                    //將less文件編譯成css文件
                    //需要下載less-loader和less
                    'less-loader'
                ]
            },
            {
                //問題：默認處理不了 html 中的 img 圖片
                //處理圖片資源
                test: /\.(jpg|png|gif)$/,
                //使用一個loader
                //下載url-loader file-loader
                loader: 'url-loader',
                options: {
                    //圖片大小小于8kb,就會被base64處理
                    //優點:減少請求數量(減輕服務器壓力)
                    //缺點:圖片體積會更大(文件請求速度更慢)
                    limit: 8 * 1024,
                    //問題:因為url-loader默認使用es6模塊化解析, 而html-loader默認引入圖片是commonjs
                    //解析時會出問題: [object Module]
                    //解決:關閉url-loader的es6模塊化,使用commonjs解析
                    esModule: false,
                    // 給圖片進行重命名
                    //[hash:10]取圖片的hash的前10位
                    // [ext]取文件原來擴展名
                    name: '[hash:10].[ext]',
                    //設置輸出目錄，將打包的圖片資源放到imgs文件夾
                    outputPath: './imgs'
                }
            },
            {
                test: /\.html$/,
                //處理html文件的img圖片(負責引入img,從而能被url-loader進行處理)
                loader: 'html-loader',
                options:
                {
                    //默認情況下,生成使用ES塊語法的Js模塊
                    //問題:生成的圖片顯示錯誤
                    //解決: esModule改為false
                    esModule: false,
                },
            }
        ]
    },

二、樣式文件中使用圖片(less場景，css 類似)

#box1{
	width: 100px;
	height: 100px;
	background-image: url('./logo1.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#box2{
	width: 200px;
	height: 200px;
	background-image: url('./logo2.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#box3{
	width: 300px;
	height: 300px;
	background-image: url('./logo3.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

2.1、樣式文件中使用圖片時用到的配置

// loader的配置
    module: {
        rules: [
            //打包 css 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader'
                ]
            },
            //打包less 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader',
                    //將less文件編譯成css文件
                    //需要下載less-loader和less
                    'less-loader'
                ]
            },
            {
                //問題：默認處理不了 html 中的 img 圖片
                //處理圖片資源
                test: /\.(jpg|png|gif)$/,
                //使用一個loader
                //下載url-loader file-loader
                loader: 'url-loader',
                options: {
                    //圖片大小小于8kb,就會被base64處理
                    //優點:減少請求數量(減輕服務器壓力)
                    //缺點:圖片體積會更大(文件請求速度更慢)
                    limit: 8 * 1024,
                    //問題:因為url-loader默認使用es6模塊化解析, 而html-loader默認引入圖片是commonjs
                    //解析時會出問題: [object Module]
                    //解決:關閉url-loader的es6模塊化,使用commonjs解析
                    esModule: false,
                    // 給圖片進行重命名
                    //[hash:10]取圖片的hash的前10位
                    // [ext]取文件原來擴展名
                    name: '[hash:10].[ext]'
                }
            }
    
        ]
    },

2.2、安裝對應 loader

# 安裝 url-loader 和 file-loader 
> npm i url-loader file-loader  -D

• 結論

1、先配置 css 或 less 文件的打包配置

2、在配置 圖片打包配置，配置使用 url-loader 和 file-loader

3、為了兼容 html 中的圖片打包配置需要關閉url-loader的es6模塊化,使用commonjs解析防止解析完后出現解析時會出問題: [object Module]

三、html中使用圖片

<!-- 文件路徑 ./src/index.htmnl -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack 學習</title>
</head>
<body>
    <h1 id="title">hello webpack</h1>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <img src="./logo2.png" alt="html中引用圖片" />
</body>
</html>

3.1、html中使用圖片時用到的配置

// loader的配置
    module: {
        rules: [
            {
                test: /\.html$/,
                //處理html文件的img圖片(負責引入img,從而能被url-loader進行處理)
                loader: 'html-loader',
                options:
                {
                    //默認情況下,生成使用ES塊語法的Js模塊
                    //問題:生成的圖片顯示錯誤
                    //解決: esModule改為false
                    esModule: false,
                },
            }
        ]
    },

3.2、安裝對應 loader

# 在安裝 url-loader 和 file-loader 的基礎上安裝 html-loader
> npm i html-loader -D

• 結論

1、配置圖片打包配置，配置使用 url-loader 、file-loader 和 html-loader

2、為了兼容 html 中的圖片打包配置需要關閉html-loader的es6模塊化,防止生成的圖片顯示錯誤

四、自定義打包圖片名稱和路徑

// 注意loader中以下的配置
        ……
        // 給圖片進行重命名
        //[hash:10]取圖片的hash的前10位
        // [ext]取文件原來擴展名
        name: '[hash:10].[ext]',
        //設置輸出目錄，將打包的圖片資源放到imgs文件夾
        outputPath: './imgs'
        ……

項目中使用 logo1.png、logo2.png、logo3.png 等3張圖片

最終顯示效果如下: