Webpack CSS

引言

Webpack 本身仅支持处理 JavaScript 模块，无法直接解析 CSS 文件。我们可以通过配套的 Loader 实现 CSS 文件的加载、解析和页面注入，让样式完美集成到打包后的项目中。

安装依赖

处理 CSS 文件需要安装两个核心 Loader（非插件），打开终端，在项目根目录执行安装命令：

npm install css-loader style-loader -D

css-loader：解析 CSS 文件中的 @import 和 url() 语法，将 CSS 内容转化为 Webpack 可识别的模块
style-loader：将解析后的 CSS 样式，通过创建 <style> 标签的方式插入到浏览器 DOM 中
-D 参数：将依赖安装为开发依赖，仅在开发环境使用

创建 CSS

在项目的 src/styles 目录下创建 index.css 文件，编写基础样式：

/* src/styles/index.css */
h1 {
    color: red;
}

修改配置文件

打开 webpack.config.js，在 module.rules 中添加 CSS 文件的处理规则，Webpack 会按照规则自动处理所有 .css 后缀的文件：

// ESM 模式导入 Node.js 模块
import path from 'path';
import { fileURLToPath } from 'url';
// ESM 模式导入插件
import HtmlWebpackPlugin from 'html-webpack-plugin';

// 手动定义 __dirname（Node.js ESM 无内置 __dirname，必须兼容处理）
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// ESM 标准导出配置
export default {
  // 指定入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    // 指定打包文件目录
    path: path.resolve(__dirname, 'dist'),
    // 打包后的文件名
    filename: "bundle.js"
  },
  // 模块解析
  resolve: {
    // 自动补全文件后缀，引入时可省略
    extensions: ['.js', '.ts', '.css', '.vue']
  },
  // 配置 Webpack 加载器
  module: {
    rules: [
      {
        // 匹配所有以 .ts 结尾的文件
        test: /\.ts$/,
        // 使用 ts-loader 编译 TypeScript
        use: 'ts-loader',
        // 排除 node_modules 目录，提升打包速度
        exclude: /node_modules/
      },
      {
        // 匹配所有以 .css 结尾的文件
        test: /\.css$/,
        // Loader 执行顺序：从右向左 执行
        // 1. css-loader 解析 CSS 文件
        // 2. style-loader 将样式注入 DOM
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 模板文件路径
      template: './public/index.html'
    })
  ]
};

引入 CSS

CSS 文件必须被入口模块引用，才能被 Webpack 识别并打包。在入口文件 src/index.ts 中引入样式文件：

// src/index.ts
import './styles/index.css';

修改 HTML

html-webpack-plugin 会自动注入打包后的 JS 文件，无需手动编写 <script> 标签，最终模板文件如下：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
</head>
<body>
    <h1>Hello Webpack</h1>
</body>
</html>

创建类型声明文件

在 src 目录下创建一个名为 global.d.ts 的文件

declare module '*.css' {
  const content: Record<string, string>;
  export default content;
}

执行打包命令

保存所有修改后，在终端执行打包命令：

npm run build

打包完成后，打开 dist 目录下的 index.html 文件：

打包工具自动生成了可运行的 bundle.js
页面中 <h1> 标签会显示为红色，证明 CSS 样式已成功加载并生效