作者按：因为教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十三)：自动生成 HTML 文件》原文地址。更欢迎来我的小站看更多原创内容：godbmw.com，进行“姿势”交流 ♪(∇*)
0. 课程介绍和资料
本节课的代码目录如下：
30.png
本节课用的 plugin 和 loader 的配置文件package.json如下：
{
"devDependencies": {
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"url-loader": "^1.0.1",
"webpack": "^4.16.1"
}
}
1. 为什么要自动生成 HTML？
看过这个系列教程的朋友，都知道在之前的例子中，每次执行webpack打包生成js文件后，都必须在index.html中手动插入打包好的文件的路径。
但在真实生产环境中，一次运行webpack后，完整的index.html应该是被自动生成的。例如静态资源、js 脚本都被自动插入了。
为了实现这个功能，需要借助HtmlWebpackPlugin根据指定的index.html模板生成对应的 html 文件，还需要配合html-loader处理 html 文件中的<img>标签和属性。
2. 编写入口文件
编写src/vendor/sum.js文件，封装sum()函数作为示例，被其他文件引用（模块化编程）：
export function sum(a, b) {
return a + b;
}
编写入口文件src/app.js，引入上面编写的sum()函数，并且运行它，以方便我们在控制台检查打包结果：
import { sum } from "./vendor/sum";
console.log("1 + 2 =", sum(1, 2));
3. 编写 HTML 文件
根目录下的index.html会被html-webpack-plugin作为最终生成的 html 文件的模板。打包后，相关引用关系和文件路径都会按照正确的配置被添加进去。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div></div>
<img src="./src/assets/imgs/xunlei.png">
</body>
</html>
4. 编写Webpack配置文件
老规矩，HtmlWebpackPlugin是在plugin这个选项中配置的。常用参数含义如下：
- filename：打包后的 html 文件名称
- template：模板文件（例子源码中根目录下的 index.html）
- chunks：和
entry配置中相匹配，支持多页面、多入口 - minify.collapseWhitespace：压缩选项
除此之外，因为我们在index.html中引用了src/assets/imgs/目录下的静态文件（图片类型）。需要用url-loader处理图片，然后再用html-loader声明。注意两者的处理顺序，url-loader先处理，然后才是html-loader处理。
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
app: "./src/app.js"
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name]-[hash:5].bundle.js",
chunkFilename: "[name]-[hash:5].chunk.js"
},
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
attrs: ["img:src"]
}
}
]
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name]-[hash:5].min.[ext]",
limit: 10000, // size <= 20KB
publicPath: "static/",
outputPath: "static/"
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./index.html",
chunks: ["app"], // entry中的app入口才会被打包
minify: {
// 压缩选项
collapseWhitespace: true
}
})
]
};
5. 结果和测试
运行webpack进行打包，下面是打包结果：
image
可以在/dist/中查看自动生成的index.html文件，如下图所示，脚本和静态资源路径都被正确处理了：
image
直接在 Chrome 打开index.html，并且打开控制台：
image
图片成功被插入到页面，并且 js 的运行也没有错误，成功。
6. 更多资料
-
html-loader文档: https://www.webpackjs.com/loaders/html-loader/ -
html-webpack-plugin文档: https://www.webpackjs.com/plugins/html-webpack-plugin/ - 《webpack4 系列教程(十三)：自动生成 HTML 文件》原文地址
网友评论