【Webpack】处理 HTML 资源（html-webpack-plugin）

秀秀_heo

已于 2024-09-25 20:59:40 修改

阅读量706

点赞数 11

分类专栏：前端工程化文章标签： webpack javascript 前端

于 2024-02-17 17:29:28 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/136140220

版权

前端工程化专栏收录该内容

43 篇文章 0 订阅

订阅专栏

处理 HTML 资源

1）自动引入生成资源：在 Webpack 构建过程中，生成的所有 JavaScript 和 CSS 文件都可以动态地被插入到 HTML 文件中，这避免了手动在 HTML 文件中更新文件引用的问题。

2）支持模板：你可以使用自己定义的 HTML 文件作为模板，并通过 ejs 等模板引擎生成最终的 HTML 文件。这使得定制化 HTML 文件变得十分便捷。

3）多页面支持：对于多页应用，html-webpack-plugin 可以配合 Webpack 的多入口配置，每个入口会生成对应的 HTML 文件。

4）压缩 HTML：通过配置，可以自动压缩 HTML 文件，从而减少文件体积，提升加载速度，例如，删除多余的空白符和注释。

5）结合其他插件实现更多功能：html-webpack-plugin 可以与许多其他插件结合使用，例如与Hashing插件一起工作，确保插入的资源带有哈希值，进一步实现缓存控制。

1. 下载包

npm i html-webpack-plugin -D

2. 配置

webpack.config.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  mode: "development",
};

参数：

template：指定了 HTML 文件的模板路径。
filename：指定生成的 HTML 文件的名称。
inject：决定了将哪里注入生成的资源，‘body’ 表示在之前注入，‘head’ 表示在中注入。

3. 修改 index.html

去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <i class="iconfont icon-arrow-down"></i>
    <i class="iconfont icon-ashbin"></i>
    <i class="iconfont icon-browse"></i>
    <!-- <script src="../dist/main.js"></script> -->
  </body>
</html>

4. 运行指令

npx webpack

此时 dist 目录就会输出一个 index.html 文件

补充：

对于多页应用：

1）需要定义多个入口文件和对应的 HtmlWebpackPlugin 实例。
2）需要配置 output 选项，使得每个入口文件输出到不同的文件中。

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

module.exports = {
  entry: {
    pageOne: './src/pageOne.js',
    pageTwo: './src/pageTwo.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/pageOne.html',
      filename: 'pageOne.html',
      chunks: ['pageOne']
    }),
    new HtmlWebpackPlugin({
      template: './src/pageTwo.html',
      filename: 'pageTwo.html',
      chunks: ['pageTwo']
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};