Webpack:HTML Webpack Plugin插件

这篇具有很好参考价值的文章主要介绍了Webpack:HTML Webpack Plugin插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        HTML Webpack Plugin插件,在Webpack构建的前端项目中,用于简化index.html文件的创建,以免除项目打包之后手动创建/拷贝index.html到打包目录下的繁琐步骤。以下,从一个已构建好的Vue项目中的一个现象谈起,逐步深入了解此插件的使用。

目录

从Vue项目中的index.html谈起

Webpack:引入HTML Webpack Plugin插件

Webpack:自动导入脚本与项目打包问题

HTML Webpack Plugin插件的其它配置

 title标题

 filename文件名

 template文件模板来源

 templateContent自定义模板属性

 templateParameters模板参数属性

​ publicPath属性

 scriptLoading脚本加载方式属性

 favicon图标属性

 mate属性

 minify属性

 hash哈希属性

 showErrors属性


从Vue项目中的index.html谈起

        当我们使用vue-cli构建Vue前端应用时,所生成的index.html基本内容如下。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

        请仔细观察以上的代码结构,标准的html页面骨架模板,body中包含一个用于挂载Vue实例的id选择器值为app的DOM元素。除此之外,没有任何JavaScript脚本的引入。

        我们再看一个打包之后,位于输出目录下的index.html文件,内容如下,

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" href="favicon.ico">
  <title>cesium-viewer</title>
  <link href="js/about.b241abde.js" rel="prefetch">
  <link href="css/chunk-vendors.b7dbb5dd.css" rel="preload" as="style">
  <link href="css/index.d52c5618.css" rel="preload" as="style">
  <link href="js/chunk-vendors.b8df0be2.js" rel="preload" as="script">
  <link href="js/index.224fd61e.js" rel="preload" as="script">
  <link href="css/chunk-vendors.b7dbb5dd.css" rel="stylesheet">
  <link href="css/index.d52c5618.css" rel="stylesheet">
</head>

<body><noscript><strong>We're sorry but cesium-viewer doesn't work properly without JavaScript enabled. Please enable it
      to continue.</strong></noscript>
  <div id="app"></div>
  <script src="js/chunk-vendors.b8df0be2.js"></script>
  <script src="js/index.224fd61e.js"></script>
</body>

</html>

        可以看到,打包之后自动生成的HTML文件中,自动为我们引入了两个script标签,用于链接打包生成的JavaScript脚本文件。看到这里,你可能很自然的联想到开头部分我们提到的HTML Webpack Plugin插件,因为该插件也具备这样的能力,这也是我们接下来想要聊的内容。

Webpack:引入HTML Webpack Plugin插件

Webpack:HTML Webpack Plugin插件

        HTML Webpack Plugin插件的GitHub官网地址为:https://github.com/jantimon/html-webpack-plugin,介绍也很简洁:Plugin that simplifies creation of HTML files to serve your bundles(一个服务于bundles的、用于简化HTML文件生成的插件)。

        要想在Webpack项目中引入该插件,首先要注意当前项目的Webpack版本,这一点可以从package.json文件中进行查看,如下图所示,我的这里是webpack 5.x版本的。

Webpack:HTML Webpack Plugin插件

         参考官网的介绍,使用Webpack5对应的命令进行安装。

# Webpack 5
  npm i --save-dev html-webpack-plugin
  yarn add --dev html-webpack-plugin
# Webpack 4
  npm i --save-dev html-webpack-plugin@4
  yarn add --dev html-webpack-plugin@4

Webpack:HTML Webpack Plugin插件

        虽然官网介绍此插件是零配置的,但是为了和我们的Webpack项目兼容,还是需要修改Webpack项目的配置文件,引入插件即可,如下所示,

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') //引入html-webpack-plugin 插件

...

module.exports = {
    ...

    plugins:[
        new HtmlWebpackPlugin({
          filename: `index.html`, //生成的文件名
          template: path.resolve(__dirname, `src/index.html`), //源文件的绝对路径
        }),
    ]
    ...
}

Webpack:自动导入脚本与项目打包问题

        在引入HTML Webpack Plugin插件之后,再进行项目的打包操作,该插件就会自动为我们生成index.html文件,文件内容如下,

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>webpack-demo</title>
  <script src="index.js"></script>
  <script defer="defer" src="index.js"></script>
</head>

<body>
  <div id="app"></div><input placeholder="input..."> <span class="iconfont">&#xf0012;</span>
  <ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
  </ul>
  <div id="box"></div>
</body>

</html>

Tips:script标签中的defer='defer'属性表示:告诉浏览器应当立即下载/引入外部的JavaScript脚本文件,但是应当推迟到整个HTML页面解析完毕之后才开始执行。注意,defer属性只对外部的脚本文件才有效。

         为了进行比对,我们看一下原始的文件内容(如下),

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack-demo</title>
  <!-- <script src="./index.js"></script> -->
  <!-- <script src="../dist/main.bundle.js"></script> -->
  <script src="index.js"></script>
</head>
<body>
  <div id="app"></div>
  <input type="text" placeholder="input...">
  <span class="iconfont">&#xf0012;</span>
  <ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
  </ul>
  <div id="box"></div>
</body>
</html>

        可以看到,和Vue项目打包之后的类似,HTML Webpack Plugin步进为我们生成了index.html文件,而在还自动在文件中引入了打包之后的"index.js"入口文件。

        我们尝试将其部署在Tomcat服务器下,

Webpack:HTML Webpack Plugin插件

         接着,启动Tomcat服务器,并访问/webpack-demo前端项目,打开开发者工具面板,

Webpack:HTML Webpack Plugin插件

         似乎是出现了一些问题,就是我们的console.log语句被打印了两次。

        这是为什么呢?我们回放打包之后的代码片段,发现index.js入口文件被引入了两次,其中:第一个script标签是我们在最初构建项目时,手动引入的;第二个script标签是HTML Webpack Plugin插件自动引入的。但是,这两个script标签都指向index.js入口文件。这也是导致执行两次的原因。

Webpack:HTML Webpack Plugin插件

       其实,这一点在HTML Webpack Plugin的GitHub页面中也有所提及,截图如下,即:该插件会自动生成带有script标签的HTML文件。

Webpack:HTML Webpack Plugin插件

        所以,为了解决这个问题,我们需要将源index.html文件中的语句注释掉,然后重新打包。

Webpack:HTML Webpack Plugin插件

         打包之后,我们重新部署,查看执行次数。确实只执行了一次,问题解决。

Webpack:HTML Webpack Plugin插件

 HTML Webpack Plugin插件的其它配置

        我们继续查看HTML Webpack Plugin插件的GitHub页面,了解一下其它的配置项。

title标题

        title配置项可以为插件生成的HTML页面配置标题内容。Webpack:HTML Webpack Plugin插件

        示例如下,

Webpack:HTML Webpack Plugin插件

 filename文件名

        filename属性,可以用于配置生成的HTML文件的文件名,默认为:index.html

Webpack:HTML Webpack Plugin插件

 template文件模板来源

        template属性,为其指定一个路径(相对路径/绝对路径均可)。可以用于配置根据哪一个HTML文件来生成打包输出时的HTML文件。

Webpack:HTML Webpack Plugin插件

 templateContent自定义模板属性

        templateContent属性,用于替换template属性,使其失效,转为使用templateContent属性指定的模板内容。

Webpack:HTML Webpack Plugin插件

         使用示例如下,

Webpack:HTML Webpack Plugin插件

 templateParameters模板参数属性

        templateParameters属性,用于为自定义的templateContent模板源中的参数名,指定参数值。就类似于一开始为生成的HTML文件指定title标题属性的操作,是一样的。

Webpack:HTML Webpack Plugin插件

        使用示例如下,

publicPath属性

        此属性用于为HTML中的script和link标签指定父级路径,建议使用默值auto。

Webpack:HTML Webpack Plugin插件

 scriptLoading脚本加载方式属性

        scriptLoading属性,用于指定scirpt脚本的加载方式,默认使用defer非阻塞的加载方式。

Webpack:HTML Webpack Plugin插件

 Webpack:HTML Webpack Plugin插件

 favicon图标属性

        favicon属性,用于给页面配置图标。

Webpack:HTML Webpack Plugin插件

         例如,我们要给Webpack搭建起来的Vue项目配置一个Vue的图标,配置如下,

 new HtmlWebpackPlugin({
      title: `Webpack-Demo`, //标题
      filename: `index.html`, //生成的文件名
      template: path.resolve(__dirname, `src/index.html`), //源文件的绝对路径
      scriptLoading: 'defer', //以非阻塞的方式加载script脚本
      favicon: path.resolve(__dirname, `src/favicon.ico`), //配置网站图标
    }),

Webpack:HTML Webpack Plugin插件

mate属性

        用于配置HTML页面的meta属性,对应Object对象类型。默认是一个空对象。

Webpack:HTML Webpack Plugin插件

         以下是默认的meta属性,

Webpack:HTML Webpack Plugin插件

         以下是配置后的meta属性,

Webpack:HTML Webpack Plugin插件

 minify属性

        minify属性,常用于项目打包时的资源文件压缩操作。

Webpack:HTML Webpack Plugin插件

 hash哈希属性

Webpack:HTML Webpack Plugin插件

         配置之后,打包出来的外部资源会默认加上一段字符码。

Webpack:HTML Webpack Plugin插件

showErrors属性

        该属性控制,是否可将错误的详细信息一一个可关闭的面板形式显示到HTML页面中。默认开启。

Webpack:HTML Webpack Plugin插件

         效果如下,Webpack:HTML Webpack Plugin插件文章来源地址https://www.toymoban.com/news/detail-471937.html

到了这里,关于Webpack:HTML Webpack Plugin插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第3集丨webpack 江湖 —— 插件(plugin)的安装和使用

    webpack plugins 插件可以完成更多 loader 不能完成的功能。插件( plugin )的使用一般是在 webpack 的配置信息 plugins 选项中指定。 Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件。 webpack-dev-server 可用于快速开发应用程序。类似于 node.js 阶段用到的 nodemon 工具,每

    2024年02月15日
    浏览(44)
  • 一、Webpack相关(包括webpack-dev-server用以热更新和html-webpack-plugin)

    webpack是前端项目工程化的具体解决方案。它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。 -S实际是--save的简写,表示安装的第三方库要被记录到package.json的dependencies(开发和上线都要用到的包)下。虽然不

    2024年02月13日
    浏览(41)
  • vue中webpack配置compression-webpack-plugin打包压缩和优化,terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化

    参考地址:https://v4.webpack.js.org/plugins/compression-webpack-plugin/ 一、compression-webpack-plugin的使用,安装插件 二、在 webpack 配置中,require 或 import 引入 三、配置 参考地址:https://v4.webpack.js.org/plugins/terser-webpack-plugin/ 一、安装terser-webpack-plugin 二、在 Webpack 配置中引入 三、配置

    2024年04月14日
    浏览(52)
  • 成功解决Error: Cannot find module ‘html‐webpack‐plugin‘

    执行npm run build的时候发现  Cannot find module \\\'html-webpack-plugin\\\'   -S 表示添加到生产环境中,npm I -D 表示开发环境使用,所以可能没有安装到开发环境中 解决如下

    2024年02月04日
    浏览(46)
  • 新安webpack插件后编译报错compiler.plugin is not a function

            安装使用generate-asset-webpack-plugin时报错 TypeError:compiler.plugin is not a function ,网上搜索了一下大概就是webpack5与这些插件不匹配。推荐的方法几乎都是换一个适配的插件版本,但我所需要的这个插件在npm上最近更新时间是7年前💔。等不着作者适配于是决定自己改。

    2023年04月24日
    浏览(41)
  • 若依Vue分离版打包报错Cannot find module ‘html-webpack-plugin‘

       1、手动的把 node_modules 这个目录删掉       2、重新安装依赖:npm install --registry=https://registry.npm.taobao.org      3、安装缺少的依赖:npm i html-webpack-plugin --save-dev --legacy-peer-deps     4、重新打包 npm run build:prod    打包结束,可以部署到服务器啦。

    2024年02月13日
    浏览(49)
  • Vite处理html模板插件之vite-plugin-html

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 背景:项目中需要使用模板html动态处理比如 icon 、title。我的项目里是需要在不同的打包指令下,打包的结果中index.html 中title 和 icon都不一致。之前的项目使用的是 html-webpack-plugin 插件。安装该插件的

    2024年02月07日
    浏览(42)
  • 前端构建工具 webpack 笔记

    1、了解 webpack   1、定义:本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具 ,当 webpack 处理应用它会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将你项目中所程序时,需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用

    2024年02月08日
    浏览(35)
  • 使用docker-maven-plugin插件构建镜像并推送至私服Harbor

    如下所示,建议使用 Dockerfile Maven 插件,但该插件也停止维护更新了。因此先暂时使用 docker-maven-plugin 插件。 默认的dokcer是不支持远程访问的,需要加点配置,开启Docker的远程访问 确定docker配置文件位置在:/etc/systemd/system/docker.service 然后编辑修改docker配置文件: 找到包含

    2024年02月11日
    浏览(61)
  • 【Docker】使用docker-maven-plugin插件构建发布推镜像到私有仓库

    本文描述了在Spring Boot项目中通过docker-maven-plugin插件把项目推送到私有docker仓库中,随后拉取仓库中的项目用docker run运行项目。作者自行构建,质量有保证。 1、要想使用 docker-maven-plugin ,需要在 pom.xml 中添加该插件; 注:注意下db:3306 2、我们构建镜像之前需要先将项目打包

    2024年02月15日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包