面试题：Webpack 插件与 Loader 的区别及在复杂项目中的协同应用

Webpack 插件和 Loader 的区别

功能
- Loader：主要用于处理不同类型的文件，将这些文件转化为 Webpack 能够理解的模块。例如，将 CSS 文件转化为 JavaScript 可以引用的模块，将图片转化为 URL 等。它专注于文件的转换。
- 插件：更侧重于对整个打包过程的控制和优化。插件可以在 Webpack 运行的各个生命周期阶段介入，执行更广泛的任务，比如压缩代码、提取公共代码、生成 HTML 文件等。
使用方式
- Loader：在 webpack.config.js 的 module.rules 中配置，通过 test 字段指定匹配的文件类型，use 字段指定使用的 Loader。例如：

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

- **插件**：在 `webpack.config.js` 的 `plugins` 数组中配置，实例化插件并传入相应的参数。例如：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

执行时机
- Loader：在模块被加载和解析阶段工作，按照配置的顺序从右到左（或从下到上）依次对文件进行转换。
- 插件：在 Webpack 构建流程的不同生命周期阶段执行，插件可以监听这些生命周期事件并执行相应操作。

在大型前端项目中插件和 Loader 协同工作

处理不同类型文件
- CSS 文件：使用 css-loader 解析 CSS 文件中的 @import 和 url() 等语句，将 CSS 转化为 JavaScript 模块，再使用 style-loader 将这些样式插入到 DOM 中。配置如下：

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

- **图片文件**：使用 `file-loader` 或 `url-loader`。`url-loader` 可以将小图片转化为 base64 编码的字符串直接嵌入到代码中，减少 HTTP 请求；大图片则使用 `file-loader` 输出到指定目录并返回其 URL。例如：

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

优化打包流程
- 压缩代码：使用 UglifyJSPlugin 插件来压缩 JavaScript 代码。在 Webpack 4 及以上版本，默认会启用该插件进行压缩。若要自定义配置，可以这样写：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new UglifyJSPlugin({
                parallel: true,
                cache: true
            })
        ]
    }
};

- **提取公共代码**：使用 `SplitChunksPlugin` 插件。它可以将多个入口 chunk 之间的公共代码提取出来，生成单独的 chunk，提高代码的复用性和加载性能。配置如下：

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

通过合理配置 Loader 处理不同类型文件，以及使用插件对打包流程进行优化，能够高效完成大型前端项目的构建任务。

星途面试题库

面试题：Webpack 插件与 Loader 的区别及在复杂项目中的协同应用

知识考点

面试题答案

Webpack 插件和 Loader 的区别

在大型前端项目中插件和 Loader 协同工作