【webpack基础】Loader的概念、处理图片类型模块

(112) 2024-01-22 09:01:01

目录

  • 1. Loader
    • 1.1 用途
    • 1.2 file-loader
      • 1.2.1 配置模块
      • 1.2 2 渲染图片到页面
      • 1.2.3 保留原本的图片名
      • 1.2.4 产出到指定文件夹
    • 2.4 url-loader
      • 2.4.1 配置模块
      • 2.4.2 存在问题及优化策略 ⭐
  • 2. mode设置

1. Loader

1.1 用途

Loader 可以处理除了 JS 以外的其它 模块

1.2 file-loader

提示:file loader现在已经不用了,url loader已经包含了file loader 了,url loader 依赖于 file loader,所以两个都要下

import jspp from './jspp.jpg';

此时打包就会报错,因为没有配置模块

【webpack基础】Loader的概念、处理图片类型模块 (https://mushiming.com/)  第1张

1.2.1 配置模块

  1. 在配置文件webpack.config.js进行配置

    const path = require('path');
    
    module.exports = { 
         
        entry: "./src/index.js",
        module: { 
         
        	rules: [  // 制定规则,告诉webpack遇到相应模块,应该怎样处理
        		{ 
         
        			test: /\.(jpg|jpe?g|gif)$/, // 如果文件后缀为 .jpg/jpeg/gif,就会使用 file-loader 处理 -> 需要安装
        			use: { 
         
        				loader: 'file-loader'
        			}
        		}
        	]
        },
        output: { 
         
            filename: "bundle.js",
            path: path.resolve(__dirname, 'dist')
        }
    }
    
  2. 安装file-loader

    yarn add file-loader@3.0.1 --D
    
  3. 打包

    yarn run build
    

file-loader就会把源代码里的图片移动到dist目录,并把图片名字解析一串哈希值,作为引入的返回值

import jspp from './jspp.jpg'; // 返回值 b841b27d07a227a028cd0bb1e9e95fcb.jpg

【webpack基础】Loader的概念、处理图片类型模块 (https://mushiming.com/)  第2张

1.2 2 渲染图片到页面

import jspp from './jspp.jpg';

const img = new Image();
img.src = jspp;

console.log(jspp);

const app = document.getElementById('app');
app.appendChild(img);

【webpack基础】Loader的概念、处理图片类型模块 (https://mushiming.com/)  第3张

1.2.3 保留原本的图片名

源代码里面的图片产出到dist文件的时候,file-loader 会把图片解析成一串哈希值(这个哈希值是根据图片内容决定)

若想保留图片原本的名字,可以通过 options -> name 对 file-loader 进行配置:

import jspp from './jspp.jpg'; // 返回值 jspp.jpg
const path = require('path');

module.exports = { 
   
    entry: './src/index.js',
    module: { 
   
        rules: [{ 
   
                test: /\.(jpg|jpe?g|gif)$/,
                use: { 
   
                    loader: 'file-loader',
                    options: { 
   
                        name: '[name].[ext]'
                    }
                }
            }
        ]
    },
    output: { 
   
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

【webpack基础】Loader的概念、处理图片类型模块 (https://mushiming.com/)  第4张

1.2.4 产出到指定文件夹

通过 options -> outputPath 进行配置

import jspp from './jspp.jpg'; // 返回值 imgs/jspp.jpg

返回值:图片目录 + 图片名

const path = require('path');

module.exports = { 
   
    entry: './src/index.js',
    module: { 
   
        rules: [{ 
   
                test: /\.(jpg|jpe?g|gif)$/,
                use: { 
   
                    loader: 'file-loader',
                    options: { 
   
                        name: '[name].[ext]',
                        outputPath: 'imgs/'
                    }
                }
            }
        ]
    },
    output: { 
   
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

【webpack基础】Loader的概念、处理图片类型模块 (https://mushiming.com/)  第5张

2.4 url-loader

和file-loader作用类似,但它会返回一个base64编码

2.4.1 配置模块

  1. 安装url-loader

    yarn add url-loader@1.1.2 -D
    
  2. 把file-loader改成url-loader

    const path = require('path');
    
    module.exports = { 
         
        entry: './src/index.js',
        module: { 
         
            rules: [{ 
         
                    test: /\.(jpg|jpe?g|gif)$/,
                    use: { 
         
                        loader: 'url-loader',
                        options: { 
         
                            name: '[name].[ext]',
                            outputPath: 'imgs/'
                        }
                    }
                }
            ]
        },
        output: { 
         
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    }
    
  3. 打包

    yarn run build
    

    此时发现产出目录没有图片,图片却依然可以显示,这是因为url-loader把它转成了base64编码作为模块引用的返回值

    import jspp from './jspp.jpg'; // 返回base64编码
    
    const img = new Image();
    img.src = jspp;
    
    console.log(jspp);
    
    const app = document.getElementById('app');
    app.appendChild(img);
    

    【webpack基础】Loader的概念、处理图片类型模块 (https://mushiming.com/)  第6张

2.4.2 存在问题及优化策略 ⭐

【webpack基础】Loader的概念、处理图片类型模块 (https://mushiming.com/)  第7张

const path = require('path');

module.exports = { 
   
    entry: './src/index.js',
    module: { 
   
        rules: [{ 
   
                test: /\.(jpg|jpe?g|gif)$/,
                use: { 
   
                    loader: 'url-loader',
                    options: { 
   
                        name: '[name].[ext]',
                        outputPath: 'imgs/',
                        limit: 20480 // 低于这个限制就解析成base64,超过这个限制就生成图片文件
                    }
                }
            }
        ]
    },
    output: { 
   
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

2. mode设置

这个警告是提升你没有设置mode,默认给你改成生产模式(代码压缩),配置一下就不会提示了

【webpack基础】Loader的概念、处理图片类型模块 (https://mushiming.com/)  第8张

const path = require('path');

module.exports = { 
   
	mode: "development",
    entry: './src/index.js',
    module: { 
   
        rules: [{ 
   
                test: /\.(jpg|jpe?g|gif)$/,
                use: { 
   
                    loader: 'url-loader',
                    options: { 
   
                        name: '[name].[ext]',
                        outputPath: 'imgs/',
                        limit: 20480 // 低于这个限制就解析成base64,超过这个限制就生成图片文件
                    }
                }
            }
        ]
    },
    output: { 
   
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}
THE END

发表回复