Webpack HTML

引言

Webpack 核心用于打包 JavaScript 模块，同时依托强大的插件生态，可完美支持 HTML、CSS、图片等各类前端静态资源的打包与管理。处理 HTML 文件时，我们需要借助 html-webpack-plugin 插件，它是 Webpack 生态中处理 HTML 资源的标准插件。

安装插件

首先需要将 html-webpack-plugin 安装为项目的开发依赖，打开终端并进入项目根目录，执行以下命令：

npm install html-webpack-plugin -D

命令中的 -D 是 --save-dev 的缩写，作用是将插件记录在 package.json 的 devDependencies 中，仅用于开发环境，不会被打包到生产环境。

创建 HTML 模板

在项目根目录创建 public 目录，并新建 index.html 作为 HTML 模板文件。该文件会作为基础模板，由插件自动加工并输出到打包目录。

<!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>

修改配置文件

打开 webpack.config.js 配置文件，引入插件并完成配置。该配置会让 Webpack 自动处理 HTML 文件，并注入打包后的脚本资源。

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

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

// Webpack 配置导出（ESM 标准写法）
export default {
  // 打包模式：生产环境（可根据需求改为 development）
  mode: 'production',
  // 入口文件
  entry: './src/index.ts',

  // 输出配置
  output: {
    path: path.resolve(__dirname, 'dist'), // 打包输出目录
    filename: 'bundle.js', // 打包后的 JS 文件名
    module: true, // 输出 ES Module 格式产物
    clean: true // Webpack5 内置：打包前自动清空 dist 目录
  },

  // 开启 ESM 输出实验特性（必须配置！）
  experiments: {
    outputModule: true
  },

  // 模块解析：自动识别文件后缀
  resolve: {
    extensions: ['.js', '.ts', '.css', '.vue']
  },

  // 模块加载规则：编译 TypeScript
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },

  // 插件配置：生成 HTML 并自动注入打包资源
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // HTML 模板路径
      filename: 'index.html', // 输出的 HTML 文件名
      inject: true // 自动注入 JS/CSS 资源
    })
  ],

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

执行打包命令

在执行打包前，确保 package.json 中已配置打包脚本：

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

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

npm run build

打包完成后，打开 dist 目录即可查看结果：插件会自动将模板 HTML 复制到该目录，并自动注入打包好的 bundle.js 文件，脚本标签默认添加 defer 属性，实现页面加载完成后再执行 JS，优化页面渲染性能。

源本科技 | 码上会

引言

安装插件

创建 HTML 模板

修改配置文件

执行打包命令