webpack自动引入打包资源HtmlWebpackPlugin的实现

在前序章节中，每次构建结束后均需手动在 public/index.html 通过 <script> 标签引入 dist/js/main.js。熟悉框架开发的开发者应了解，例如 vue-cli 构建后，只需将 dist 目录整体部署至服务器，无需额外修改代码。此功能由本文介绍的插件 HtmlWebpackPlugin 实现。

一、什么是HtmlWebpackPlugin

HtmlWebpackPlugin 是一款 webpack插件，负责生成 HTML 文件并自动注入打包产物。它依据指定模板生成 HTML，并自动关联本次打包后的 JS 与 CSS。此外，该插件支持生成含哈希值的文件名以解决缓存问题。HtmlWebpackPlugin 实现了 webpack 与 HTML 文件生成及管理流程的无缝集成。

二、在webpack中使用

中文官网教程 https://webpack.docschina.org/plugins/html-webpack-plugin

1. 下载依赖

npm i html-webpack-plugin -D

2. 基本用法

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    })],
};

执行构建前，需注释 public/index.html 中手动引入资源的代码，如图所示：

一、什么是HtmlWebpackPlugin

3. 打包

npx webpack

构建完成后，dist 目录下自动生成 index.html 文件，如图所示：

一、什么是HtmlWebpackPlugin

系统已自动引入 main.js，同时保留了 public/index.html 中的预设配置。

在浏览器中运行结果如图所示：

一、什么是HtmlWebpackPlugin

最终效果与手动引入一致。

4. 完整的webpack.config.js代码如下

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin"); // 引入 ESLint 插件
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入 html-webpack-plugin 插件
module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: js文件输出文件名
    filename: "js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        // 用来匹配.less结尾的文件
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        // 用来匹配图片文件
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 images 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "images/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource", // 以文件资源的形式输出
        generator: {
          filename: "media/[hash:8][ext][query]", // 输出到media目录中
        },
      },
      {
        test: /\.m?js$/, // 转译哪些文件
        exclude: /(node_modules|bower_components)/, // 排除哪些文件夹中的js文件不用转译
        // use: {
        loader: 'babel-loader',
        //   options: {
        //     presets: ['@babel/preset-env'] // 添加预设，转译js文件
        //   }
        // }
      }
    ],
  },
  // 插件
  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", // 开发模式
};

至此，关于 webpack 自动引入打包资源及 HtmlWebpackPlugin 实现的教程介绍完毕。如需了解更多 webpack 与 HtmlWebpackPlugin 相关内容，请查阅本站往期文章或继续浏览后续文章，感谢大家的支持！

webpack自动引入打包资源HtmlWebpackPlugin的实现

一、 什么是HtmlWebpackPlugin

二、在webpack中使用

1. 下载依赖

2. 基本用法

3. 打包

4. 完整的webpack.config.js代码如下

实用工具推荐

一、什么是HtmlWebpackPlugin