Webpack 概述

引言

Webpack 是一款主流的前端自动化模块打包解决方案。它会深度分析项目目录结构，识别项目中的 JavaScript 模块，以及浏览器无法直接解析运行的扩展语言与资源（如 SCSS、TypeScript、Vue 单文件组件等），通过编译、转换、整合后，打包输出为浏览器可直接识别运行的标准静态资源格式。核心能力覆盖模块化依赖管理、静态资源优化、代码分割抽离、多类型文件编译处理等，是现代前端工程化的核心工具之一

https://webpack.docschina.org/

特性

代码转换：将 TypeScript 编译为 JavaScript，将 SCSS、LESS、Stylus 等预处理器样式编译为标准 CSS，同时支持对 JS 语法进行降级处理，兼容低版本浏览器
文件优化：压缩 JavaScript、CSS、HTML 代码体积，对图片进行压缩、合并与格式优化，有效减小线上资源加载体积
代码分割：抽离多页面复用的公共代码模块，拆分首屏非必要代码并实现异步懒加载，降低首屏加载资源大小
模块合并：在模块化开发的项目中，将分散的多个模块文件按依赖关系分类合并，减少浏览器网络请求数量
自动刷新：监听本地源码文件变化，自动触发重新构建与浏览器页面刷新，搭配热更新可实现模块无刷新替换

若不使用 Webpack，以上所有编译、压缩、合并、刷新等工作均需手动完成，不仅开发效率极低，还极易出现依赖混乱、代码冗余、路径错误等问题。

流程

参数解析：读取 webpack.config.js 配置文件与 Shell 执行参数，进行合并与格式化，生成最终完整的运行配置
找到入口文件：以配置的 Entry 为起始点，递归解析文件内部依赖，梳理出整个应用完整的依赖关系图谱
调用 Loader 编译文件：针对不同后缀的模块文件，匹配对应 Loader 规则，完成文件的编译与语法转换
遍历 AST，收集依赖：Loader 处理完成后，解析文件生成抽象语法树 AST，遍历语法树收集当前模块依赖的所有子模块
生成 Chunk：以 Entry 为维度对 Module 进行分组，每个入口文件及其依赖模块共同组成一个 Chunk
输出文件：将所有 Chunk 经过编译、压缩、整合后输出至配置的 dist 目录，保证依赖关系有序可执行，使浏览器能够正常解析与加载项目资源

安装

首先执行项目初始化命令，快速生成项目依赖管理文件 package.json：

npm init -y

安装 Webpack 核心包、命令行工具，以及 TypeScript 和 ts-loader，用于处理 TS 文件编译，所有依赖均安装为开发依赖：

npm i -D webpack webpack-cli typescript ts-loader

在 package.json 的 scripts 节点中添加 build 脚本，用于触发 Webpack 打包；同时可删除默认的 "main": "index.js"，将项目入口与打包逻辑完全交由 Webpack 管理。

完整 package.json 示例如下：

{
  "name": "hello-webpack",
  "version": "1.0.0",
  "type": "module",
  "description": "",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.5.1",
    "typescript": "^5.3.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

配置完成后，执行打包命令 npm run build，即可启动 Webpack 执行项目打包。

配置

Webpack 默认仅支持 JavaScript 文件打包，若需支持 TypeScript 等其他类型文件，必须通过配置文件自定义编译规则。

根目录创建配置

创建名为 webpack.config.js

该文件是 Webpack 的核心配置文件，所有打包相关规则均在此定义：

import path from 'path';
import { fileURLToPath } from 'url';

// 手动定义 __dirname（兼容 ESM 模式）
const __filename = fileURLToPath(import.meta.url); // 获取当前文件的绝对路径
const __dirname = path.dirname(__filename); // 获取当前文件所在目录的绝对路径

// Webpack 配置导出（ESM 模式）
export default {
  // 打包模式
  mode: 'production',
  // 入口文件
  entry: './src/index.ts',
  
  // 输出 ESM 模块配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    module: true, // 输出 ES Module 格式产物
    clean: true // Webpack5 内置：打包前自动清空 dist 目录
  },

  // 开启 Webpack 实验特性（必须加！）
  experiments: {
    outputModule: true
  },

  // 模块解析
  resolve: {
    // 自动识别文件后缀，引入模块时可省略对应后缀名
    extensions: ['.js', '.ts', '.css', '.vue']
  },

  // TS 文件加载器
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },

  // 关闭生产环境 sourceMap（减小包体积）
  devtool: false
};

配置 TS 编译规范

在项目根目录创建 tsconfig.json，用于定义 TypeScript 编译约束规则：

{
  "compilerOptions": {
    // 编译目标版本（现代浏览器）
    "target": "ES2020",
    // 使用 ES Module 模块化规范
    "module": "ESNext",
    // 适配 Webpack5 的模块解析策略
    "moduleResolution": "bundler",
    "rootDir": "./src",
    // 输出目录（与 webpack 保持一致）
    "outDir": "./dist",
    // 开启严格类型检查（推荐，工程化必备）
    "strict": true,
    // 生成 TS 类型声明文件（库开发必备）
    "declaration": false,
    // 跳过第三方库类型检查（提升编译速度）
    "skipLibCheck": true,
    // 强制文件扩展名（ESM 规范要求）
    "forceConsistentCasingInFileNames": true
  },
  // 编译范围
  "include": ["./src/**/*"]
}

打包

Webpack 可将项目中多个分散的 .ts 模块文件，合并打包为单个可在浏览器直接运行的 .js 文件。

新建 src/utils/mathUtil.ts 文件，定义求和工具函数并默认导出：

const add = (a: number, b: number): number => {
    return a + b;
};

export default {
    add
};

新建 src/index.ts 入口文件，导入工具模块并调用方法：

import mathUtils from './utils/mathUtil';

const result: number = mathUtils.add(1, 2);
console.log(result);

在终端执行打包命令：

npm run build

打包成功后，项目根目录会自动生成 dist 目录，内部包含打包完成的 bundle.js 产物文件。

源本科技 | 码上会

引言

特性

流程

安装

配置

根目录创建配置

配置 TS 编译规范

打包