面试题：Webpack构建过程中图片与字体资源打包的深度优化与定制策略

Question

在一个复杂的前端工程中，图片和字体资源在不同环境（开发、测试、生产）下有不同的打包需求。例如，在开发环境需要快速的构建速度，允许较宽松的资源处理；而在生产环境则要求极致的性能优化，包括图片的无损压缩、字体的按需加载等。同时，要保证不同资源的打包过程可高度定制，以适应未来可能的业务变化。请详细描述你将如何基于Webpack设计一套完整的、可灵活调整的图片与字体资源打包方案，包括涉及到的Webpack插件、loader的选择与配置，以及不同环境下差异化配置的实现思路。

Answer 1

1. 基础Webpack配置

1. 安装必要的loader和插件
   • 图片处理：file - loader用于处理图片文件，image - webpack - loader用于图片压缩。

   npm install file - loader image - webpack - loader --save - dev
   

   • 字体处理：url - loader用于处理字体文件，它可以将小字体文件转换为DataURL。

   npm install url - loader --save - dev
   

2. Webpack通用配置（webpack.common.js）
   • 图片处理：

   module.exports = {
       module: {
           rules: [
               {
                   test: /\.(png|jpg|jpeg|gif)$/i,
                   use: [
                       {
                           loader: 'file - loader',
                           options: {
                               name: 'images/[name].[ext]',
                               publicPath: '../'
                           }
                       }
                   ]
               }
           ]
       }
   };
   

   • 字体处理：

   module.exports = {
       module: {
           rules: [
               {
                   test: /\.(woff|woff2|eot|ttf|otf)$/i,
                   use: [
                       {
                           loader: 'url - loader',
                           options: {
                               limit: 8192,
                               name: 'fonts/[name].[ext]',
                               publicPath: '../'
                           }
                       }
                   ]
               }
           ]
       }
   };
   

2. 开发环境配置（webpack.dev.js）

1. 差异化配置思路：开发环境注重构建速度，所以对图片和字体资源的处理相对宽松。
2. 配置实现：
   • 图片处理：在webpack.dev.js中，我们可以不启用image - webpack - loader，保持file - loader的基础配置。

   const common = require('./webpack.common.js');
   const { merge } = require('webpack - merge');
   
   module.exports = merge(common, {
       mode: 'development'
   });
   

   • 字体处理：保持url - loader的基础配置，不做额外优化。

3. 生产环境配置（webpack.prod.js）

1. 差异化配置思路：生产环境要求极致的性能优化，对图片进行无损压缩，对字体进行按需加载。
2. 配置实现：
   • 图片处理：在webpack.prod.js中，添加image - webpack - loader进行图片无损压缩。

   const common = require('./webpack.common.js');
   const { merge } = require('webpack - merge');
   
   module.exports = merge(common, {
       mode: 'production',
       module: {
           rules: [
               {
                   test: /\.(png|jpg|jpeg|gif)$/i,
                   use: [
                       {
                           loader: 'file - loader',
                           options: {
                               name: 'images/[name].[ext]',
                               publicPath: '../'
                           }
                       },
                       {
                           loader: 'image - webpack - loader',
                           options: {
                               mozjpeg: {
                                   progressive: true,
                                   quality: 65
                               },
                               // optipng.enabled: false will disable optipng
                               optipng: {
                                   enabled: false
                               },
                               pngquant: {
                                   quality: [0.65, 0.90],
                                   speed: 4
                               },
                               gifsicle: {
                                   interlaced: false
                               },
                               // the webp option will enable WEBP
                               webp: {
                                   quality: 75
                               }
                           }
                       }
                   ]
               }
           ]
       }
   });
   

   • 字体处理：可以考虑使用一些字体按需加载的工具，例如font - loader，结合@font - face的font - display属性来优化字体加载。

   module.exports = merge(common, {
       mode: 'production',
       module: {
           rules: [
               {
                   test: /\.(woff|woff2|eot|ttf|otf)$/i,
                   use: [
                       {
                           loader: 'url - loader',
                           options: {
                               limit: 8192,
                               name: 'fonts/[name].[ext]',
                               publicPath: '../'
                           }
                       },
                       // 假设引入font - loader
                       {
                           loader: 'font - loader',
                           options: {
                               // 按需加载配置
                           }
                       }
                   ]
               }
           ]
       }
   });
   

4. 实现不同环境差异化配置的方式

1. 使用webpack - merge：通过webpack - merge库，可以将通用配置（webpack.common.js）与不同环境（开发webpack.dev.js、生产webpack.prod.js）的差异化配置进行合并。这样可以避免重复代码，同时保持配置的清晰和可维护性。
2. 环境变量：在构建脚本中，可以通过设置环境变量（如NODE_ENV）来区分不同环境。例如，在package.json中：

   {
       "scripts": {
           "dev": "NODE_ENV = development webpack - - config webpack.dev.js",
           "build": "NODE_ENV = production webpack - - config webpack.prod.js"
       }
   }
   

   Webpack配置文件中可以根据process.env.NODE_ENV来做一些条件判断，进一步定制不同环境的配置。

通过以上基于Webpack的配置方案，可以实现一套完整的、可灵活调整的图片与字体资源打包方案，满足不同环境下的打包需求。