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

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';

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

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

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);

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')
    }
}

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')
    }
}

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);
   

   

2.4.2 存在问题及优化策略 ⭐

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，默认给你改成生产模式（代码压缩），配置一下就不会提示了

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')
    }
}