导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

列举常见 plugin 和 loader

• Webpack
  • webpack
  • webpack-cli
  • webpack-dev-server
• CSS
  • postcss-loader + autoprefixer（浏览器兼容性）
  • optimize-css-assets-webpack-plugin（压缩css文件）
  • style-loader（内联css到html）
  • css-loader（处理模块化css）
  • sass-loader/node-sass（处理scss）
  • mini-css-extract-plugin（抽离css）
• JavaScript
  • babel-core
  • babel-loader
  • babel-plugin-transform-decorators + babel-plugin-transform-decorators-legacy (装饰器)
  • babel-plugin-transform-runtime（ES7+：generator、iterator、async、await）
  • babel-preset-latset 或者 babel-preset-env（比前者后发布）【babel预设】
  • uglifyjs-webpack-plugin（压缩js）
• html
  • html-webpack-plugin（处理html，添加script标签）
  • clean-webpack-plugin（打包前清除文件）
• 文件
  • file-loader（识别、处理文件路径）
  • url-loader（通过图片大小判断是转成 base64 还是用原图片、重命名图片）
    • url-loader 包含 file-loader ，不用再安装 file-loader
  • image-webpack-plugin（图片压缩）
• node
  • nodemon（监听文件变化）
• 网络请求
  • node-fetch
• vue
  • vue-style-loader（处理vue文件中css，最终内联到html文件中的head去）

🔥 loader VS plugin

判断经验：

• 是否“直接处理某个模块的内容” → loader
• 是否“介入构建流程、影响整体产物或时机” → plugin

一、webpack 的核心模型（理解本质）

webpack 本质只有一件事：

从入口出发，把“模块” → 构建成 → “资源（assets）”

在这个过程中，有两条完全不同的能力线：

loader：模块维度（Module → Module）

• 只关心 某一个文件
• 输入是源码字符串
• 输出也是源码字符串（或 JS AST）
• 不知道“整体构建发生了什么”

plugin：构建维度（整个生命周期）

• 关心 整个编译过程
• 能看到 模块、chunk、asset
• 能控制 什么时候做事

这就是它们在架构层面的分工。

二、Loader：你什么时候“必须”用 loader？

Loader 的本质

loader = 文件内容转换器

source code → loader → new source code

Loader 的 3 个核心特征

典型 loader 场景（必须用 loader）

1️⃣ 文件格式转换

.less → css
.scss → css
.ts → js
.vue → js

为什么是 loader？

• 因为 这是模块内容的转换
• webpack 需要的是「能被打包的 JS 模块」

2️⃣ 对源码做“语义层面的修改”

比如：

• i18n 自动替换
• 自动注入埋点
• 删除调试代码
• 自动包一层 try/catch

// input
console.log('debug')

// output
if (process.env.NODE_ENV !== 'production') {
  console.log('debug')
}

👉 只和“这个文件”有关 → loader

3️⃣ 非 JS 资源转 JS 模块

import img from './logo.png'

本质是：