深入理解webpack-loader和plugin的区别

一、loader和plugin的区别

webpack是一个模块打包器，它将所有的资源都看成是一个模块，包括JavaScript、CSS、图片等等。它需要一系列帮助它处理这些模块的工具来进行打包。其中最基本的工具就是loader和plugin。

loader是一个转换器，它将某种文件格式的源代码转换成另一种文件格式。举例来说，webpack本身只能打包CommonJS规范的JavaScript代码，如果我们希望webpack可以打包ES6代码，那么我们就需要安装babel-loader，使用它来转换ES6代码。因此，我们可以认为，loader的主要作用是让webpack能够识别和处理不同的文件类型。

plugin则是用来扩展webpack功能的。它可以在webpack的各个生命周期中注入一些任务，用来完成一些额外的处理工作。比如在模块编译完成后，我们可以使用UglifyJSPlugin来进行代码压缩，或者使用ExtractTextPlugin提取CSS代码到单独的文件中。因为plugin可以在webpack的生命周期的任何时刻挂载执行，所以它可以做的事情非常丰富。

二、loader与plugin的区别体现

1、处理资源类型不同

loader和plugin在处理的资源类型上是有差异的。loader主要处理各种类型的文件（JavaScript、CSS、图片等等），将它们转换成webpack可以处理的模块。而plugin则是较为灵活的，它们可以在webpack运行过程中的任何时刻挂载执行，执行各种任务，比如代码压缩、文件提取、CDN上传等等。

2、作用于不同的阶段

loader和plugin的另一个区别就是作用于不同的阶段。loader主要作用于webpack的编译过程中，也就是说，它们是在模块代码转换成webpack可以处理的模块的阶段进行工作的。plugin则可以作用于webpack的各个阶段，从而完成更广泛的功能扩展工作。

3、工作方式不同

loader和plugin的工作方式也有所区别，在于它们对webpack编译过程的交互方式。loader主要是通过修改webpack的module对象来实现对模块的处理，从而实现代码的转换。而plugin则是通过监听webpack编译过程中的各种事件，从而执行不同的任务，最终修改webpack的输出结果。

三、代码示例

loader示例

module: {
    rules: [
        {
            test: /\.js$/, // 匹配JavaScript文件
            exclude: /node_modules/, // 排除掉node_modules
            loader: 'babel-loader', // 使用babel-loader处理JavaScript代码
            options: {
                presets: ['@babel/preset-env']
            }
        }
    ]
}

plugin示例

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({ // 使用HtmlWebpackPlugin生成HTML文件
            title: 'Custom template',
            template: './index.html'
        })
    ]
};

四、结语

在webpack的打包过程中，loader和plugin是不可或缺的工具。通过理解loader和plugin的区别，我们可以更好地利用它们来完成各种工作，扩展webpack的功能。