面试题：Webpack中加载器（Loader）和插件（Plugin）在功能上有何主要区别？

Webpack加载器功能

文件转换：加载器（Loader）主要用于将不同类型的文件转换为Webpack能够处理的模块。Webpack本身只能理解JavaScript和JSON文件，通过加载器可以处理如CSS、Sass、Less、图片、字体等各种类型的文件。
链式处理：多个加载器可以链式调用，从右到左（或从下到上）依次对文件进行处理。例如，对于一个CSS文件，可能先经过css - loader处理，再经过style - loader处理。

加载器使用场景举例

样式文件处理：
- CSS文件：使用css - loader将CSS文件解析为JavaScript模块，再结合style - loader将样式插入到DOM中。例如在一个React项目中，组件有自己的CSS样式文件，通过如下配置可以实现样式的加载：
```
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style - loader', 'css - loader']
            }
        ]
    }
};
```
- Sass/Less文件：先使用sass - loader（针对Sass）或less - loader（针对Less）将Sass或Less文件编译为CSS，然后再使用css - loader和style - loader。如：
```
module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ['style - loader', 'css - loader','sass - loader']
            }
        ]
    }
};
```
图片和字体处理：
- 图片：使用file - loader或url - loader处理图片。file - loader会将图片输出到指定目录，并返回图片的路径。url - loader在图片较小时，会将图片转换为Data URL嵌入到代码中，减少HTTP请求。例如：
```
module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url - loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    }
};
```
- 字体：类似地，使用file - loader处理字体文件，将字体文件输出到指定目录，并在CSS中正确引用字体路径。

Webpack插件功能

扩展功能：插件（Plugin）用于扩展Webpack的功能，在Webpack构建流程的各个阶段发挥作用。它可以执行一些加载器无法完成的任务，比如优化资源、注入环境变量、管理输出文件等。
生命周期钩子：插件通过在Webpack的生命周期钩子上注册回调函数来工作。Webpack提供了一系列的钩子，如entryOption、compile、emit等，插件可以在这些钩子上执行自定义逻辑。

插件使用场景举例

优化资源：

压缩代码：使用UglifyJSPlugin压缩JavaScript代码，去除冗余代码、缩短变量名等，减小文件体积。在Webpack配置中可以这样使用：

const UglifyJSPlugin = require('uglifyjs - webpack - plugin');
module.exports = {
    plugins: [
        new UglifyJSPlugin()
    ]
};

提取CSS到单独文件：使用MiniCssExtractPlugin将CSS从JavaScript中提取出来，生成单独的CSS文件。这在生产环境中可以实现CSS的单独加载和缓存，提高性能。配置如下：

const MiniCssExtractPlugin = require('mini - css - extract - plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css - loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
};

注入环境变量：使用DefinePlugin可以在编译时将环境变量注入到代码中。例如在开发和生产环境中使用不同的API地址：

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
};

管理输出文件：
- 清理输出目录：使用CleanWebpackPlugin在每次构建前清理输出目录，确保输出目录中只有最新构建的文件。配置如下：
```
const CleanWebpackPlugin = require('clean - webpack - plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
};
```

星途面试题库

面试题：Webpack中加载器（Loader）和插件（Plugin）在功能上有何主要区别？

知识考点

面试题答案

Webpack加载器功能

加载器使用场景举例

Webpack插件功能

插件使用场景举例