面试题：Webpack开发环境与生产环境配置中关于文件加载器的差异

差异

CSS 文件加载器
- 开发环境：
  - 通常会使用 style - loader 与 css - loader 配合。style - loader 会将 CSS 以 <style> 标签的形式注入到 HTML 页面的 <head> 标签中，这样修改 CSS 后能即时在浏览器中看到效果，方便开发调试。例如：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style - loader', 'css - loader']
            }
        ]
    }
};

生产环境：
- 一般会使用 MiniCssExtractPlugin 代替 style - loader。MiniCssExtractPlugin 会将 CSS 提取到单独的文件中，这样可以实现 CSS 文件的单独加载和缓存，提高页面加载性能。同时，可能会配合 OptimizeCSSAssetsPlugin 进行 CSS 代码的压缩。配置示例：

const MiniCssExtractPlugin = require('mini - css - extract - plugin');
const OptimizeCSSAssetsPlugin = require('optimize - css - assets - plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css - loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ],
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({})
        ]
    }
};

图片文件加载器
- 开发环境：
  - 使用 url - loader 时，通常会设置一个相对较大的 limit 值（如 8192，单位为字节）。当图片小于这个 limit 值时，会将图片转为 base64 编码嵌入到 JavaScript 或 CSS 中，这样减少了请求次数，方便开发时查看效果。配置如下：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url - loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    }
};

生产环境：
- url - loader 的 limit 值会设置得相对较小（如 1024），更多图片会以单独文件形式输出。同时，可能会使用 image - webpack - loader 对图片进行压缩，以减小图片文件大小，提升页面加载速度。配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url - loader',
                        options: {
                            limit: 1024
                        }
                    },
                    {
                        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
                            }
                        }
                    }
                ]
            }
        ]
    }
};

差异原因

开发环境：
- 重点在于提高开发效率和便利性。将 CSS 注入到页面和把小图片转为 base64 嵌入，减少了文件请求次数，使得开发人员能快速看到样式和图片效果，且无需频繁处理文件缓存等问题，更专注于功能开发和样式调试。
生产环境：
- 主要目标是优化性能，提高用户体验。将 CSS 提取为单独文件便于浏览器缓存，提高页面加载速度。对图片进行压缩并根据实际情况调整加载方式，能有效减小文件体积，降低带宽消耗，让用户更快地加载页面内容。

星途面试题库

面试题：Webpack开发环境与生产环境配置中关于文件加载器的差异

知识考点

面试题答案

差异

差异原因