Webpack打包HTML配置全解析

大家好，今天本人给大家带来文章《Webpack打包HTML文件配置详解》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

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

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

安装 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：

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
  }
})

基本上就这些。只要配置好 html-webpack-plugin，Webpack 就能自动管理 HTML 文件的生成和资源注入，无需手动维护 script 标签。整个流程简单高效，适合现代前端构建需求。

今天关于《Webpack打包HTML配置全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！