面试题：Webpack模块化中如何配置loader处理不同类型文件

Question

假设项目中有CSS、LESS、JavaScript和图片文件，描述在Webpack中如何配置相应的loader来正确处理这些文件，以实现模块化开发，并给出简单的配置示例。

Answer 1

1. CSS文件：
   • 配置说明：使用css - loader处理CSS文件中的@import和url()等引用，style - loader将CSS插入到DOM中。
   • 示例配置：

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

2. LESS文件：
   • 配置说明：除了css - loader和style - loader，还需要less - loader和less将LESS文件转换为CSS。
   • 示例配置：

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

3. JavaScript文件：
   • 配置说明：通常使用babel - loader来转译JavaScript，使其能在不同环境运行，需要配合@babel/core和相应的@babel/preset - env等预设。
   • 示例配置：

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

4. 图片文件：
   • 配置说明：url - loader或file - loader可以处理图片文件，url - loader在图片较小时会将其转为DataURL嵌入代码，file - loader则直接输出文件并返回路径。
   • 示例配置（使用url - loader）：

module: {
    rules: [
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'url - loader',
                    options: {
                        limit: 8192 // 8KB，小于此大小转为DataURL
                    }
                }
            ]
        }
    ]
}