Loader 是「文件级翻译机」：webpack 只认 JS，那么 css-loader 负责把 CSS 变成 JS 模块、babel-loader 负责把 TS/ES6+ 降级成浏览器能跑的 JS、url-loader 决定图片是打包成 base64 还是文件。配置在 module.rules 里按 test 匹配扩展名，多个 loader 从右往左链式执行。
Plugin 是「过程级插手者」：它监听 compiler 钩子，在打包的各阶段做事——HtmlWebpackPlugin 生成入口 HTML、MiniCssExtractPlugin 把 CSS 抽成独立文件、DefinePlugin 注入环境变量、SplitChunksPlugin 做代码拆分。一句话区分：loader 让 webpack 能「处理」某种文件，plugin 让 webpack 能「改变」构建过程本身。
// webpack.config.js —— loader 与 plugin 的典型配置 const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ { test: /\.(js|ts)x?$/, exclude: /node_modules/, use: { loader: 'babel-loader' } // loader：转译 JS }, { test: /\.css$/, // 链式执行（从右往左）：postcss → css-loader → 抽取成文件 use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html' }), // plugin：生成 HTML new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }), new (require('webpack')).DefinePlugin({ 'process.env.API_BASE': JSON.stringify('/api') }) ] };