一、webpack中loader和plugin的區別

1. Loader（每個 Loader 是一個函數或對象）

• 功能：文件轉換 --> 將源文件轉換為webpack可以處理的模塊
• 處理單位：單個文件（.js,.css,.png）
• 執行順序：鏈式調用，按配置順序依次執行（源文件 -> Loader1 -> Loader2 -> … -> Webpack可用模塊）

// webpack.config.js
module: {rules: [{test: /\.css$/,use: [ // 執行順序從后到前'style-loader',  // 將CSS注入DOM'css-loader',    // 解析CSS中的@import和url()，支持css modules'postcss-loader' // 添加瀏覽器前綴]}]
}

• 常用Loader
  代碼轉換：Babel(.js),TypeScript(.ts)
  樣式處理：css-loader,sass-loader,postcss-loader
  文件處理：file-loader,url-loader(小圖轉為Base64),svg-loader
  模版編譯：pug-loader,handlebard-loader

2.plugin（每個 Plugin 是一個實例）

• 功能：擴展功能 --> 在Webpack構建流程的特定階段執行自定義邏輯
• 處理單位：整個構建過程（如打包完成后生成HTML文件）
• 執行順序：基于事件鉤子，可在特定階段多次觸發（Webpack啟動 -> 觸發各種事件鉤子 -> Plugin監聽特定鉤子并執行邏輯）

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');plugins: [new HtmlWebpackPlugin({template: './src/index.html' // 基于模板生成HTML})
]

• 常用Plugins
  CleanWebpackPlugin(),// 每次構建前清空dist目錄
  MiniCssExtractPlugin(), // 提取CSS到單獨文件，通常生產環境中，替代style-loader
  TerserPlugin(), // 壓縮JS
  HtmlWebpackPlugin(), // 生成 HTML

3.自定義loader和plugin

1. 極簡的loader

module.exports = function(source) {// source: 輸入的文件內容（字符串或Buffer）// 獲取loader配置參數，this.getOptions 是 Webpack 提供的標準化參數獲取方式const options = this.getOptions() || {};// 處理邏輯...return source; // 返回處理后的內容
};

2. 極簡的plugin

class MyPlugin {constructor(options) {this.options = options; // 接收配置參數}apply(compiler) { // compiler見下// 注冊鉤子監聽編譯過程compiler.hooks.someHook.tap('MyPlugin', (compilation) => { // compilation見下// 處理邏輯...});}
}module.exports = MyPlugin;

二、Babel的功能

一句話概括：Babel的功能是JavaScript代碼轉換

• 可處理：ES6+語法轉為ES5兼容形式、API補全（Promise，Array.includes）、適配不同瀏覽器|node版本等
• Babel 的核心是插件系統，每個轉換功能由獨立插件實現

// babel.config.js
module.exports = {plugins: ["@babel/plugin-transform-arrow-functions", // 轉換箭頭函數"@babel/plugin-transform-classes", // 轉換 class 語法"@babel/plugin-proposal-object-rest-spread" // 轉換展開運算符]
};

• Presets（預設）：預設是一組插件的集合，避免手動配置大量插件

// babel.config.js
module.exports = {presets: ["@babel/preset-env", // 智能轉換 ES6+ 代碼"@babel/preset-react", // 轉換 JSX"@babel/preset-typescript" // 轉換 TypeScript]
};

• Babel 的工作流程：解析代碼 → 轉換 AST → 生成新代碼。
• Babel常和webpack協作，通過babel-loader作為橋梁

// webpack.config.js
module.exports = {module: {rules: [{test: /\.js$/,use: {loader: 'babel-loader', // 調用Babel編譯JS文件options: {presets: ['@babel/preset-env']}}}]}
};

三、Plugin中的compiler和compilation對象

1. compiler對象

全局單例，代表整個webpack編譯過程，包含所有配置信息，監聽編譯全過程（compile、emit、done）

• compile：當 Webpack 開始新的一輪編譯時觸發（在讀取配置后，真正編譯前） —> 獲取編譯配置、修改默認行為
• emit：在文件輸出到磁盤前觸發（所有模塊已編譯，資源已生成）。 —> 修改輸出資源（如重命名文件、添加額外內容）。
• done：整個編譯過程完成時觸發（文件已寫入磁盤）。 —> 執行編譯后的操作（如通知構建完成、生成報告）。

2. compilation對象

每次構建創建，代表一次具體的編譯過程，包含當前構建的所有模塊、資源和依賴關系，可修改、添加或刪除構建產物