配置文件与常用 Loader：让 Webpack 听懂 TS/CSS

本节目标

Webpack 默认只认识 JavaScript（和 JSON）。但你的项目里有 .ts、.css、.png、.vue……这些它统统不认。这时候就需要 loader（加载器）——你可以把它想成「翻译官」：每种 loader 负责把某一类文件，转译成 Webpack 能理解的 JS 模块。

// webpack.config.js（片段）
module.exports = {
  entry: './src/index.ts',
  module: {
    // rules 是一组「遇到某种文件，用哪些 loader 处理」的规则
    rules: [
      {
        test: /\.ts$/,        // 匹配以 .ts 结尾的文件
        use: 'ts-loader',     // 用 ts-loader 把它转成 JS
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'], // import 时不写后缀也能解析
  },
  mode: 'development',
}

配套依赖与 tsconfig.json：

# 安装：ts-loader 依赖 typescript 本体
# npm i -D webpack webpack-cli typescript ts-loader
// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true
  }
}

test 是正则、use 是 loader 名。Webpack 遇到 import './a.ts' 时，命中 test: /\.ts$/，于是调用 ts-loader 把 TS 编译成 JS，再继续参与打包。这就是「非 JS 资源进入依赖图」的机制。

名词解释

Loader（加载器）：Webpack 的「文件翻译官」，把某种类型的资源（TS、CSS、图片…）转成 JS 模块，从而能进入依赖图被打包。

module.rules：配置 loader 的地方，每条规则是一个 { test, use, exclude } 对象，表示「匹配到的文件用某 loader 处理」。

test / use：test 是正则，决定「哪些文件」命中；use 是 loader 列表（从右到左、从下到上执行）。

Source Map（源码映射）：把压缩/转译后的代码「映射回」原始源码的对照表，让你在浏览器 DevTools 里能直接调试 .ts 源码而不是看编译产物。

课后练习

练习 1：use: ['style-loader', 'css-loader'] 两个 loader 谁先执行？

答案：数组从右到左执行，所以先 css-loader（把 CSS 解析成 JS 字符串/模块），再 style-loader（把样式注入到页面的 <style> 里）。顺序写反就废了。

练习 2：为什么 exclude: /node_modules/ 几乎是 loader 的标配？

答案：node_modules 里的包通常是「已经编译好的发布版」，再让 ts-loader/babel 转一遍既慢又可能出错。排除它能大幅加快构建，也避免破坏第三方包。

总结

loader 是 Webpack「能处理一切」的秘密武器：test 决定命中谁，use 决定用什么翻译，规则从右往左执行。本节省下的关键认知是——任何非 JS 资源，本质都是「找一个 loader 把它变成 JS 模块」，然后它就能像普通模块一样被 import、被打包。下一节具体到「样式与图片」，把 CSS、图片、字体这些「前端日常」全部接进依赖图。