作者按: 因为教程所示图片使用的是 GitHub 仓库图片, 网速过慢的朋友请移步《webpack4 系列教程 (十三): 自动生成 html 文件》原文地址 https://godbmw.com/passage/72 . 更欢迎来我的小站看更多原创内容: https://godbmw.com/ , 进行 "姿势" 交流 ♪(*)
0. 课程介绍和资料
>>> 本节课源码
>>> 所有课程源码 https://github.com/dongyuanxin/webpack-demos
本节课的代码目录如下:
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 文档:
来源: http://www.jianshu.com/p/b89a978b7ce3