DDR爱好者之家

详解html-webpack-plugin插件(用法总结)
站长资源 2024/11/26 佚名
26 1538
DDR爱好者之家 Design By 杰米

html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件，如果直接将 html 文件置于 ./src 目录中，用 Webpack 打包时是不会编译到生产环境中的。因为 Webpack 编译任何文件都需要基于配置文件先行配置的。

Webpack 插件使用三步曲：安装>引入>配置

npm 安装

npm install --save-dev html-webpack-plugin

yarn 安装

yarn add html-webpack-plugin --dev

html-webpack-plugin 入口未定义时

//webpack.config.js 
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin()
  ]
}

输出的 html 文件为：dist/index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
 </head>
 <body>
 <script type="text/javascript" src="/UploadFiles/2021-04-02/home.js">


此 webpack.config.js 配置文件，是最简用法 html-webpack-plugin 甚至未传递任何参数，但它基于这个原则 Entrypoint undefined = index.html 当未定义此插件的入口时，默认为 index.html,输出同样是 index.html。

所以未定义入口时，不论 ./src 下有任何名称的 html 文件都不会被打包处理，但是会默认输出 index.html 文件。


html-webpack-plugin 中任何自定义参数设置都会覆盖默认值




简单定义一个入口（在参数对象的 template 字段中设置）看看效果：




./src/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 id="test">html webpack plugin</div>
</body>
</html>






webpack.config.js 增加 template 字段





const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index.html'//只增加了这行
    })
  ]
}







打包结果是 dist/home.js 和 dist/index.html 其中 html　文件内容如下，和之前src文件中创建的完全一样，证明自定义入口生效，且覆盖了默认入口





<!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 id="test">html webpack plugin</div>
</body>
</html>






template: './src/index2.html' 这里，template 的值就是 html 文件的入口，相当于js文件的 entry 字段的作用，只设置 template时，默认输出为 index.html, 输出文件名通过 `filename` 字段设置




template指定你生成的文件所依赖哪一个html文件模板，模板类型可以是html、jade、ejs等。但是要注意的是，如果想使用自定义的模板文件的时候，你需要安装对应的loader。


当配置了 html 文件的出口 filename 时







const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index2.html',
      filename: 'index.output.html'
    })
  ]
}







输出为 dist/home.js 和 dist/index.output.html


同 webpack.config.js 配置文件的 output 属性的 filename 字段一样，htmlWebpackPlugin({})的filname 字段也可以在其值加文件夹实现分类







const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: path.resolve(__dirname, './src/app.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index2.html',
      filename: './category/index.output.html'
    })
  ]
}







输出为 dist/home.js 和 dist/category/index.output.html


title 字段，只有未定义 template 模板文件的时候生效，即只在使用默认输出文件index.html 的时候，title 设置才有用，否则它的值，会被你指定的 template 文件的title所覆盖，title　默认值为　Webpack App


favicon




'./somepath/favicon.ico',它的值是你的 favicon.ico 图标的路径


inject的四个值： true body head false 指定在何处（body or head）引入 script 文件


    
  
  • true 默认值，script标签位于html文件的 body 底部
    • 
  
  • body script标签位于html文件的 body 底部
    • 
  
  • head script标签位于html文件的 head中
    • 
  
  • false 不插入生成的js文件，这个几乎不会用到的
    • 



其中 body 和 head 为字符串类型需要加引号，false和true为 Boolean 类型值


minify 的值是一个对象，设置压缩属性







plugins: [

new HtmlWebpackPlugin({
  ...
  minify: {
    removeAttributeQuotes: true // 移除属性的引号
  }
})
]







    
  
  • hash：布尔值，用于清除缓存
    • 
  
  • cache: 布尔值, 指定文件要不要缓存
    • 
  
  • showErrors：布尔值，将错误信息写入HTML页面
    • 
  
  • meta： {} 值是对象，设置元信息
    • 






meta：{viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}





xhtml




一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件。


chunks




chunks主要用于多入口文件，当你有多个入口文件，那就回编译后生成多个打包后的文件，那么chunks 就能选择你要使用那些js文件





entry: {
  index: path.resolve(__dirname, './src/index.js'),
  devor: path.resolve(__dirname, './src/devor.js'),
  main: path.resolve(__dirname, './src/main.js')
}

plugins: [
  new httpWebpackPlugin({
    chunks: ['index','main']
  })
]







那么编译后：





<script type=text/javascript src="/UploadFiles/2021-04-02/index.js">


如果你没有设置 chunks 选项，那么默认html 文件会引入所有的 entry 里面的js文件


excludeChunks 和 Chunks作用是一样的，值也都是数组形式，对多入口js进行选择




排除掉一些js





excludeChunks: ['devor.js']
// 等价于上面的





xhtml




一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件。




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米