深入理解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的功能。