面试题：Webpack配置文件中如何优化图片加载并配置不同环境的图片处理策略？

Question

在webpack.config.js里，针对不同格式的图片（如jpg、png、svg），如何通过合适的loader（如url - loader、file - loader等）优化图片加载，比如将小图片转为base64，同时还要配置在开发环境和生产环境下不同的图片处理策略，应该怎么做？

Answer 1

以下是在 webpack.config.js 中针对不同格式图片优化加载并配置不同环境策略的示例：

1. 安装必要的 loader：

   • 确保安装 url-loader 和 file-loader：

   npm install url-loader file-loader --save-dev
   

2. 配置 webpack.config.js：

   const path = require('path');
   
   module.exports = (env) => {
       const isProduction = env === 'production';
       const fileLoaderRule = {
           test: /\.(png|jpg|jpeg|gif)$/i,
           use: [
               {
                   loader: 'url-loader',
                   options: {
                       limit: 8192, // 将小于 8kb 的图片转为 base64
                       name: isProduction? 'images/[name].[contenthash].[ext]' : 'images/[name].[ext]',
                       publicPath: isProduction? '../' : '/'
                   }
               }
           ]
       };
       const svgLoaderRule = {
           test: /\.svg$/i,
           issuer: /\.[jt]sx?$/,
           use: ['@svgr/webpack']
       };
   
       return {
           entry: './src/index.js',
           output: {
               path: path.resolve(__dirname, 'dist'),
               filename: 'bundle.js'
           },
           module: {
               rules: [fileLoaderRule, svgLoaderRule]
           }
       };
   };
   

在上述配置中：

• fileLoaderRule：针对 png、jpg、jpeg、gif 图片格式，url-loader 在图片小于 8kb 时会将其转为 base64 编码。
  • 在生产环境中，name 属性设置图片输出路径为 images/[name].[contenthash].[ext]，通过 contenthash 确保缓存控制。
  • 在开发环境中，name 属性设置为 images/[name].[ext]。
  • publicPath 根据环境设置图片的公共路径。
• svgLoaderRule：使用 @svgr/webpack 处理 svg 文件，issuer: /\.[jt]sx?$/ 确保仅在 JavaScript/TypeScript 文件导入 svg 时应用此 loader。