面试题：Webpack加载器工作机制及常见使用场景

Webpack加载器工作机制

概念：Webpack本身只能理解JavaScript和JSON文件，加载器（loader）让Webpack能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，且可以添加到依赖图中。
工作流程：
- 识别：Webpack在打包过程中，当遇到一个新的文件路径引用时，会根据文件的扩展名，匹配配置中相应的加载器。
- 转换：加载器按照配置的顺序，从右到左（从下到上）依次对文件进行转换操作。每个加载器可以将输入文件转换为新的格式或内容，最终输出JavaScript模块。
- 缓存：Webpack会对加载器处理过的文件进行缓存，提高后续构建速度，只要文件内容没有改变，就会复用缓存结果。

处理CSS资源

常见方式：使用style-loader和css-loader。css-loader负责解析CSS文件中的@import和url()等引用，并将CSS文件转化为JavaScript模块；style-loader将css-loader输出的内容，以<style>标签的形式插入到HTML页面的<head>标签中。
配置步骤：
- 安装依赖：

npm install style-loader css-loader --save-dev

- 在`webpack.config.js`中配置：

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

处理图片资源

常见方式：使用file-loader或url-loader。file-loader会将图片文件输出到指定目录，并返回图片的路径；url-loader在图片较小时，可以将图片转换为Base64编码的字符串，直接嵌入到JavaScript中，减少HTTP请求。
配置步骤：
- 使用file-loader：
  - 安装依赖：

npm install file-loader --save-dev

    - 在`webpack.config.js`中配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]' // 输出到images目录，保持原文件名和扩展名
                        }
                    }
                ]
            }
        ]
    }
};

- **使用url-loader**：
    - 安装依赖：

npm install url-loader --save-dev

    - 在`webpack.config.js`中配置：

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

星途面试题库

面试题：Webpack加载器工作机制及常见使用场景

知识考点

面试题答案

Webpack加载器工作机制

处理CSS资源

处理图片资源