webpack-html-plugin

什么是插件(plugin)

  • plugin: 用于扩展 webpack 的功能
  • 当然 loader 也是变相的扩展了 webpack, 但是它只专注于转化文件这一个领域
  • 而 plugin 的功能更加的丰富，而不仅局限于资源的加载

什么是 HtmlWebpackPlugin

HtmlWebpackPlugin 会在打包结束之后自动创建一个 index.html, 并将打包好的 JS 自动引入到这个文件中

使用 HtmlWebpackPlugin

官方文档：https://www.webpackjs.com/plugins/html-webpack-plugin/

安装 HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

配置 HtmlWebpackPlugin

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

image-20211109161311388

plugins: [new HtmlWebpackPlugin()]

image-20211109161412036

配置好了 HTML 插件之后然后再来看看我们的 JS 文件的内容，内容业务逻辑也比较简单，就是将导入的图片添加到了 body 当中然后也导入了 .css 样式内容如下：

import icon from "./BNTang.jpg";
import "./index.css"

let oImg = document.createElement("img");
oImg.src = icon;
oImg.setAttribute("class", "size");
document.body.appendChild(oImg);

我们要测试的内容就是看经过 webpack 进行打包之后是否为我们自动生成了一个 .html 并且自动的引入了打包之后的 .js 文件内容，最终效果如下：

image-20211113135423733

发现没有问题，然后我们运行一下看看效果如下图：

image-20211113135457665

HtmlWebpackPlugin 高级使用

官方文档：https://github.com/jantimon/html-webpack-plugin#configuration

默认情况下 HtmlWebpackPlugin 生成的 html 文件是一个空的文件，如果想指定生成文件中的内容可以通过配置模板的方式来实现, 修改 webpack 配置文件，在 htmlPlugin 配置当中添加如下内容来进行指定模板：

image-20211113140209417

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板文件</title>
</head>
<body>
<div>我是头部</div>
<div>我是内容</div>
<div>我是底部</div>
</body>
</html>

然后再次进行打包，查看效果如下：

image-20211113140623159

默认情况下生成的 html 文件并没有进行压缩，如果想让 html 文件压缩可以添加进行压缩的配置，继续修改配置内容如下：

image-20211113140754153

plugins: [new HtmlWebpackPlugin({
    template: "index.html",
    // 对生成的html文件内容进行压缩处理
    minify: {
        collapseWhitespace: true
    }
})]

继续打包, 查看效果如下图：

image-20211113141020349

End

posted @ 2021-11-09 16:59  BNTang  阅读(283)  评论(0)  编辑  收藏  举报