Webpack 作为前端历史上统治地位的打包工具，几乎在所有大型项目中都有身影。它能把各种资源和代码打包成可直接运行的 JavaScript，只是这背后却隐藏了不少痛点：

• 对文件类型的支持不完整：默认只识别 JS/JSON。
• 配置语法繁琐，容易出现方法匹配错误。
• 多种 Loader 的执行顺序和优先级让人摸不着头脑。
• 再看性能瓶颈，大量文件时建立速度慢。
• 自定义 Loader 的实现与调试成本高。

Loader 基础概念

Loader 是 Webpack 用来转换模块内容的插件。它们可以是第三方也可以是自己写的脚本。 Webpack 本身只能处理 JS/JSON，其他文件需要 Loader 转换后才能被解析。

创建最简 Webpack 工程

先创建一个简单项目：

npm init -y
npm install -D webpack webpack-cli

修改 package.json

{
...
"scripts": {
"build": "webpack"
}
}

Create src/index.js。src/index.html,and . 之后执行 npm run build 即可看到结果。按理说，

CSS Loader 示例 – 常见错误与方法

User Pain Point: 开发者常在引入 CSS 时直接报错：“module not found”或 “Module parse failed”。老实说，原因是缺少对应 Loader。

• No CSS support by default.
• Error message:

Module build failed: Module parse failed: Unexpected token
You may need an appropriate loader to handle this file type.
import "./index.css";

方法这方面。按顺序添加 css-loader.

module.exports = {
再看module，{
说到rules，}
]
}
};

The generated bundle now contains CSS code injected into DOM.

User Pain Point: 想直接 import XML，但没有 Loader 会导致 “Cannot find module” 或 “Module parse failed”.

• Add rule for .xml files.
• Create .
• `import dataXml from './index.xml';console.log，` works after adding `xml-loader`.

Babel-Loader – ES6+ 到兼容老浏览器的桥梁

User Pain Point: 使用现代语法导致旧浏览器报错，“const/let is not defined”.

• Avoid Babel‑loader → code runs unchanged but fails in old browsers.
• Add Babel‑loader with preset-env.
• Differentiated output before/after Babel shown in example.