面试题：Webpack配置文件中模块加载规则的配置要点

Question

在Webpack配置文件里，如何配置不同类型文件（如CSS、JavaScript、图片等）的加载规则？请举例说明loader的使用方式及常见参数设置。

Answer 1

在Webpack配置文件（通常是webpack.config.js）中，通过module.rules数组来配置不同类型文件的加载规则。以下是常见文件类型的配置示例：

CSS文件

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

• test：用于匹配文件路径的正则表达式，这里/\.css$/表示匹配所有以.css结尾的文件。
• use：指定使用的loader，style-loader将CSS插入到DOM中，css-loader用于解析CSS文件，处理@import和url()等。加载顺序是从右到左（从下到上），先由css-loader处理，再由style-loader处理。

JavaScript文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

• exclude：排除node_modules目录，因为node_modules中的代码不需要再进行编译。
• babel-loader：用于将ES6+代码转换为向后兼容的JavaScript代码。
• options.presets：指定Babel预设，@babel/preset-env会根据目标运行环境自动转换代码。

图片文件

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

• file-loader：用于处理图片等静态资源文件。
• options.name：指定输出文件的路径和名称，[name]是原文件名，[ext]是原文件扩展名，这里将图片输出到images目录下。

还可以使用url-loader来处理小图片，它会将小图片转换为Base64编码嵌入到代码中，减少HTTP请求：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192, // 小于8kb的图片转为Base64
                            name: 'images/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    }
};

limit参数指定了转换为Base64的图片大小限制。