什么是插件(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');
plugins: [new HtmlWebpackPlugin()]
配置好了 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 文件内容,最终效果如下:
发现没有问题,然后我们运行一下看看效果如下图:
HtmlWebpackPlugin 高级使用
官方文档:https://github.com/jantimon/html-webpack-plugin#configuration
默认情况下 HtmlWebpackPlugin
生成的 html
文件是一个空的文件,如果想指定生成文件中的内容可以通过配置模板的方式来实现, 修改 webpack 配置文件,在 htmlPlugin 配置当中添加如下内容来进行指定模板:
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板文件</title>
</head>
<body>
<div>我是头部</div>
<div>我是内容</div>
<div>我是底部</div>
</body>
</html>
然后再次进行打包,查看效果如下:
默认情况下生成的 html
文件并没有进行压缩,如果想让 html 文件压缩可以添加进行压缩的配置,继续修改配置内容如下:
plugins: [new HtmlWebpackPlugin({
template: "index.html",
// 对生成的html文件内容进行压缩处理
minify: {
collapseWhitespace: true
}
})]
继续打包, 查看效果如下图: