webpack如何打包html_Webpack构建工具中HTML文件打包配置方法

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

webpack如何打包html_Webpack构建工具中HTML文件打包配置方法

2025-10-31

浏览次数：次

返回列表

HtmlWebpackPlugin插件使Webpack能处理HTML文件，自动打包并注入资源。通过配置template指定源文件，filename设置输出名，可生成dist/index.html并自动引入JS。多页面应用中，多次使用该插件配合多入口，实现各页面加载对应资源。支持title、meta、minify压缩、inject控制脚本插入位置等选项，提升构建效率，无需手动维护script标签，满足现代前端开发需求。

webpack如何打包html_webpack构建工具中html文件打包配置方法

Webpack 本身是一个以 J*aScript 模块为核心的打包工具，它默认不会处理 HTML 文件。为了让 Webpack 正确打包并自动引入生成的资源（如 JS、CSS），需要借助 html-webpack-plugin 插件来处理 HTML 文件。

安装 html-webpack-plugin

在项目根目录下运行命令安装插件：

npm install --s*e-dev html-webpack-plugin

基本配置：将 HTML 打包进输出目录

在 webpack.config.js 中引入插件，并配置入口 HTML 文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 源 HTML 文件
      filename: 'index.html'        // 输出文件名
    })
  ]
};

这样，Webpack 构建时会自动生成 dist/index.html，并自动插入打包后的 JS 文件引用。

立即学习“前端免费学习笔记（深入）”；

多页面应用中的 HTML 打包

如果项目有多个 HTML 页面，可以多次使用 HtmlWebpackPlugin：

Visla

AI视频生成器，快速轻松地将您的想法转化为视觉上令人惊叹的视频。

100 查看详情 Visla

plugins: [
  new HtmlWebpackPlugin({
    template: './src/page1.html',
    filename: 'page1.html',
    chunks: ['page1'] // 对应 entry 中的 key
  }),
  new HtmlWebpackPlugin({
    template: './src/page2.html',
    filename: 'page2.html',
    chunks: ['page2']
  })
]

配合多入口配置，实现每个页面只加载对应 JS 资源。

常用配置项说明

HtmlWebpackPlugin 支持多种选项优化输出：

title：设置页面标题
meta：注入 meta 标签（如 viewport）
minify：压缩输出的 HTML
inject：控制 JS 插入位置（true | 'head' | 'body' | false）

例如开启压缩：

new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  minify: {
    removeComments: true,
    collapseWhitespace: true
  }
})