欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack4 系列教程(十三):自动生成HTML文件

程序员文章站 2022-03-26 09:27:43
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步 "《webpack4 系列教程(十三):自动生成 HTML 文件》原文地址" 。更欢迎来我的小站看更多原创内容: "godbmw.com" ,进行“姿势”交流 ♪(^∇^\ ) 0. 课程介绍和资料 " 本节课源码" " ......

作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步《webpack4 系列教程(十三):自动生成 html 文件》原文地址。更欢迎来我的小站看更多原创内容:,进行“姿势”交流 ♪(^∇^*)

0. 课程介绍和资料

本节课的代码目录如下:

webpack4 系列教程(十三):自动生成HTML文件

本节课用的 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进行打包,下面是打包结果:

webpack4 系列教程(十三):自动生成HTML文件

可以在/dist/中查看自动生成的index.html文件,如下图所示,脚本和静态资源路径都被正确处理了:

webpack4 系列教程(十三):自动生成HTML文件

直接在 chrome 打开index.html,并且打开控制台:

webpack4 系列教程(十三):自动生成HTML文件

图片成功被插入到页面,并且 js 的运行也没有错误,成功。

6. 更多资料