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

quietin 发布于2019-08-23 12:24 / 1429人阅读

摘要：作者按因为教程所示图片使用的是仓库图片，网速过慢的朋友请移步系列教程十三自动生成文件原文地址。编写配置文件老规矩，是在这个选项中配置的。更多资料文档文档系列教程十三自动生成文件原文地址

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

0. 课程介绍和资料

>>>本节课源码

>>>所有课程源码

本节课的代码目录如下：

本节课用的 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 文件中的标签和属性。

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 文件的模板。打包后，相关引用关系和文件路径都会按照正确的配置被添加进去。





  
  
  
  Document

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进行打包，下面是打包结果：

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

直接在 Chrome 打开index.html，并且打开控制台：

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

6. 更多资料

html-loader文档: https://www.webpackjs.com/loaders/html-loader/

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

《webpack4 系列教程(十三)：自动生成 HTML 文件》原文地址

云服务器混合云 webpack4教程画图生成html文件 linux系列教程云服务器建站教程系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98455.html

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

摘要：作者按因为教程所示图片使用的是仓库图片，网速过慢的朋友请移步系列教程十三自动生成文件原文地址。编写配置文件老规矩，是在这个选项中配置的。更多资料文档文档系列教程十三自动生成文件原文地址作者按：因为教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十三)：自动生成 HTML 文件》原文地址。更欢迎来我的小站看更多原创内容：godbmw.co...

superw 2019-08-02 11:45 评论0 收藏0
webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack4 系列教程(十四)：Clean Plugin and Watch Mode

摘要：作者按因为教程所示图片使用的是仓库图片，网速过慢的朋友请移步系列教程十四原文地址。需要注意的是应该把放在配置项的最后一个，因为配置是倒序的最后配置的最先执行。以保证每次正式打包前，先清空原来遗留的打包文件。作者按：因为教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址...

TalkingData 2019-08-23 12:27 评论0 收藏0
webpack4 系列教程(六): 处理SCSS

摘要：只需要在处理的配置上增加编译的即可。了解更多处理的内容本节课源码所有课程源码教程所示图片使用的是仓库图片，网速过慢的朋友请移步原文地址系列教程六处理。根据规则放在最后的首先被执行。这节课讲解webpack4中处理scss。只需要在处理css的配置上增加编译scss的 LOADER 即可。了解更多处理css的内容 >>> >>> 本节课源码 >>> 所有课程源码教程所示图片使用的是...

马龙驹 2019-08-23 11:33 评论0 收藏0