Webpack5 htmlwebpackplugin用法

文章目录

  • HtmlWebpackPlugin介绍
  • HtmlWebpackPlugin用法
    • [1. 安装HtmlWebpackPlugin插件:](#1. 安装HtmlWebpackPlugin插件:)
    • [2. 引入HtmlWebpackPlugin插件:](#2. 引入HtmlWebpackPlugin插件:)
    • [3. 配置HtmlWebpackPlugin:](#3. 配置HtmlWebpackPlugin:)
    • [4. 更多HtmlWebpackPlugin配置选项:](#4. 更多HtmlWebpackPlugin配置选项:)
  • 总结

HtmlWebpackPlugin介绍

Webpack是一个功能强大的模块打包工具,而HtmlWebpackPlugin是Webpack的一个插件,用于生成HTML文件并自动注入打包后的资源。

HtmlWebpackPlugin用法

1. 安装HtmlWebpackPlugin插件:

在开始之前,首先需要确保已经安装了Webpack5。然后,通过以下命令安装HtmlWebpackPlugin插件:

bash 复制代码
npm install html-webpack-plugin --save-dev

2. 引入HtmlWebpackPlugin插件:

在Webpack的配置文件中,使用require语句引入HtmlWebpackPlugin插件:

javascript 复制代码
const HtmlWebpackPlugin = require('html-webpack-plugin');

3. 配置HtmlWebpackPlugin:

在Webpack配置文件中,通过创建一个新的HtmlWebpackPlugin实例来配置插件:

javascript 复制代码
   plugins: [
     new HtmlWebpackPlugin({
       //一般使用绝对路径
       template:   path.resolve(__dirname, '../public/index.html') ,
       filename: 'index.html',
       minify: {
         collapseWhitespace: true,
         removeComments: true,
         removeRedundantAttributes: true,
         removeScriptTypeAttributes: true,
         removeStyleLinkTypeAttributes: true,
         useShortDoctype: true
       }
     })
   ]
  • template:指定HTML模板文件的路径,可以使用相对路径或绝对路径。
  • filename:指定生成的HTML文件名。
  • minify:压缩生成的HTML文件,可以通过配置该选项实现对HTML的压缩。

4. 更多HtmlWebpackPlugin配置选项:

  • title:设置生成的HTML文件的标题。
  • favicon:指定生成的HTML文件的favicon图标。
  • meta:定义生成的HTML文件中的meta标签。
  • hash:为生成的资源文件添加唯一的哈希值。
  • chunks:配置需要注入到HTML文件中的chunk。
  • templateParameters:自定义模板参数,可以在HTML模板文件中使用。
  • inject:指定资源文件的注入位置,可选值有true、'head'和'body'。
  • scriptLoading:指定生成的script标签的加载方式,可选值有'defer'、'async'和'blocking'。
  • cache:启用或禁用缓存,当值为true时启用缓存。
javascript 复制代码
new HtmlWebpackPlugin({
  ...
  title: 'My App',
  favicon: './src/assets/favicon.ico',
  meta: {
    viewport: 'width=device-width, initial-scale=1'
  },
  hash: true,
  chunks: ['main'],
  templateParameters: {
    BASE_URL: '/'
  },
  inject: 'body',
  scriptLoading: 'defer',
  cache: true
})

总结

介绍了Webpack5中HtmlWebpackPlugin插件的用法及其各种配置选项。借助HtmlWebpackPlugin插件,我们可以方便地生成HTML文件并自动注入打包后的资源,同时还能对HTML进行压缩和定制化配置。

相关推荐
你挚爱的强哥4 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
天天进步20157 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript