简介
随着前端技术的快速发展，现在已经不只是编写简单的 HTML 代码和 CSS 样式表了，而是需要用到大量的工具和框架来提高效率和质量。其中，像 Webpack 这样的模块打包工具就成为了前端技术栈中不可或缺的一部分。WebPack 不仅可以打包 JavaScript，还可以将 CSS、图片、HTML 等文件打包成一个或多个文件。
在 Webpack 打包 HTML 文件时，需要用到 html-webpack-plugin 这个插件。html-webpack-plugin 能够生成一个 HTML 文件，并自动将打包后的 CSS 和 JS 文件加入到 HTML 中，可以非常方便地将最终生成的文件发送到服务器。
但是，如果我们需要兼容低版本浏览器，那么就需要使用 html-webpack-plugin-legacy 这个插件。这个插件能够生成两个 HTML 文件，一个用于现代浏览器，一个用于旧版本浏览器，并自动插入对应版本的打包后的 CSS 和 JS 文件。
本文旨在介绍 html-webpack-plugin-legacy 的使用方法，包括安装、配置和示例代码。
安装
首先，需要确认已经安装了最新版本的 Webpack 和 html-webpack-plugin，否则无法使用 html-webpack-plugin-legacy。在确认这些工具已经安装之后，就可以通过 npm 安装 html-webpack-plugin-legacy 了。使用以下命令进行安装：
npm install html-webpack-plugin-legacy --save-dev
配置
安装完 html-webpack-plugin-legacy 之后，接下来需要进行配置。以下是 html-webpack-plugin-legacy 的常规配置选项：
modern：现代浏览器所使用的 HTML 模板；legacy：旧版本浏览器所使用的 HTML 模板；filename：HTML 文件的文件名；chunks：需要插入的 Chunk 列表；minify：是否压缩 HTML；inject：JS 文件嵌入的位置；hash：是否在文件名上添加哈希值；cache：是否启用文件缓存。
下面是一个示例配置：
-- -------------------- ---- -------
-------------- - -
-------- -
--- -------------------
------- -------------
------- --------------
--------- -------------
------- ---------
------- -----
------ ----
---
--- ------------------------
------- -------------
------- --------------
--------- --------------
------- ------------- ----------
------- -----
------ ----
--
-
-在这个示例配置中，有两个 HtmlWebpackPlugin 和 HtmlWebpackPuginLegacy 插件的实例被创建了。其中，一个使用文件名 index.html，它的 Chunk 列表包含 main Chunk，并且是用于现代浏览器的 HTML 文件。另一个使用文件名 legacy.html，其 Chunk 列表包含 polyfills 和 legacy Chunks，并且是用于旧版本浏览器的 HTML 文件。
示例代码
以下是一个完整的示例代码，用于演示如何在 Webpack 中使用 html-webpack-plugin-legacy。
文件结构
-- -------------------- ---- -------
- ----------
- ------------
- -----------------
- ---------
-
-------
- --------
- ------------
-
----------
- ---------
-
---------
- ----------webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ---------------------- - --------------------------------------
-------------- - -
------ -
----- -----------------
------- --------------------
--
------- -
--------- --------------------------
----- ----------------------- -------
--
----- -------------
------- -
------ -
-
----- ----------
---- ---------------- --------------
--
-
----- --------------
----- -----------------
---------- -
--------- --------------------
--
--
--
--
-------- -
--- -------------------
------- -------------
------- --------------
--------- -------------
------- ---------
------- -----
------ ----
---
--- ------------------------
------- -------------
------- --------------
--------- --------------
------- ------------- ----------
------- -----
------ ----
--
-
--src/index.js
import './styles/style.css';
console.log('Hello world!');src/styles/style.css
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: red;
}src/polyfills.js
import './styles/style.css';
import './styles/fonts/font.woff2';
console.log('Hello world from legacy mode!');总结
html-webpack-plugin-legacy 是一个非常有用的插件，可以让开发者非常方便地适应不同的浏览器环境。在正式使用之前，需要先安装完 Webpack 和 html-webpack-plugin，然后通过 npm 安装 html-webpack-plugin-legacy。最后，需要进行正确的配置，才能成功使用这个插件。希望本文能够让读者更好地了解 html-webpack-plugin-legacy 的使用方法，从而提高自己的前端技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005595d81e8991b448d6c09