详解html-webpack-plugin配置

最新推荐文章于 2024-04-16 01:31:01 发布
最新推荐文章于 2024-04-16 01:31:01 发布
阅读量316 收藏
点赞数
文章标签： webpack xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/noper/p/6683834.html
版权

作用

简化HTML文件的创建

遇到的问题

1. 在模板中使用 <%= HtmlWebpackPlugin.options.title %> 报错：HtmlWebpackPlugin is undefined

　　HtmlWebpackPlugin => 首字母小写 htmlWebpackPlugin

2. 配置项

{
    plugins: [
        new htmlWebpackPlugin({
            template: '模板所在目录',
            title: '生成的HTML文档的标题',
            filename: '输出的html文件名',
            inject: 'true |'head'|'body'|false将assets注入template或templateContent', 
            favicon: '将给定的图标路径添加到输出html',
            minify: '{...} | false传递html-minifier选项对象来缩小输出',
            hash: 'true | false如果true然后在所有包含的脚本和CSS文件中附加一个唯一的webpack编译哈希。这对于缓存清除非常有用',
            cache: 'true | falseif true（默认）只有在更改文件时才尝试发出文件。',
            showErrors: 'true | false如果true（默认）错误的详细信息将被写入HTML页面',
            chunks: '允许添加的chunk',
            chunksSortMode: '允许控制如何将批处理包含在html之前进行排序。允许的值：'none'| 'auto'| '依赖'| {function} - 默认值：'auto'',
            excludeChunks: '允许您跳过一些chunk',
            xhtml："true | false如果true将link标签渲染为自动关闭，则符合XHTML。默认是false"
        })
    ]
}

 3. 将js脚本直接以inline的形式插入到htm页面（这样做可以减少http请求）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 直接引入的例子 -->
    <script type="text/javascript">
        <%= compilation.assets[htmlWebpackPlugin.files.chunks.vendors.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
    </script>
</head>
<body>
    
</body>
</html>

 

 


　　

转载于:https://www.cnblogs.com/noper/p/6683834.html

aimei1647
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack学习笔记三（生成项目中的html页面）
qq_42734999的博客
07-11 140
使用 HtmlWebpackPlugin 插件生成项目中的页面文件，通过插件的参数，配置来控制页面引入的资源，参数 安装html-webpack-plugin插件 cnpm install html-webpack-plugin --save-dev 在webpack配置文件中引入插件 //CommonJs方式 var htmlWebpackPlugin = require('html-...
详解html-webpack-plugin用法全解
08-28
在 `webpack.config.js` 中，你可以通过以下方式配置 `html-webpack-plugin`： ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins: [ new ...
webpack配置html-webpack-plugin
cyj5201314的博客
01-09 1325
配置html-webpack-plugin生成预览页面 ① 运行 npm i html-webpack-plugin -D安装生成预览页面的插件 ② 修改webpack.config.json 文件头部区域如下： const path = require('path') const html_webpack_plugin = require('html-webpack-plugin') const html_plugin = new html_webpack_plugin({ template:
html-webpack-plugin 配置
CS304961760的博客
11-09 528
HTML Webpack Plugin 是一个非常有用的插件，它可以帮助你自动化地生成 HTML 文件，并将打包后的静态文件部署到指定的文件夹中。minify：指定要对 HTML 文件进行压缩和优化的一系列选项，包括删除空格、注释、多余的属性、script 和 link 标签中的 type 属性等。template: 'src/index.html', // 指定要使用的 HTML 模板文件。inject: 'body', // 将打包后的脚本注入到 HTML 文件的 body 中。
html-webpack-plugin如何配置
trickyyoung的博客
05-30 2319
html-webpack-plugin插件的作用是让我们打开http://localhost:8080/地址时直接跳转到index.html 因为正常情况下我们打开http://localhost:8080/ 时浏览器会跳转到项目根目录 html-webpack-plugin 的配置如下 1.下载完插件后在配置文件 webppack.config.js 里用require导入并创建一个构造函数(其中 HtmlPlugin 是我们自定义的构造函数名)： const HtmlPlugin = requi
html-webpack-plugin插件的使用和配置
Zyl_CN的博客
03-29 485
特点: 1.自动在内存中根据所配置的指定页面生成一个内存的页面； 2.自动把打包好的js文件追加到页面当中。 npm i html-webpack-plugin -d //在项目中来进行安装 然后在在webpack.config.js中进行配置 new htmlWebpackPlugin({ template: path.join(__dirname,'./src/...
详解html-webpack-plugin插件(用法总结)
10-18
npm install --save-dev html-webpack-plugin # yarn 安装 yarn add html-webpack-plugin --dev ``` ### 二、引入与配置 在 `webpack.config.js` 文件中引入并配置 HTMLWebpackPlugin。通常在 `plugins` 部分进行...
extract-text-webpack-plugin用法详解
11-28
另一种就是使用extract-text-webpack-plugin插件，将样式文件单独打包，打包输出的文件由配置文件中的output属性指定。然后我们在入口HTML页面写个link标签引入这个打包后的样式文件。 三 插件使用 1
详解html-webpack-plugin使用
11-19
1. **自动注入资源**：当 Webpack 打包完成后，HTMLWebpackPlugin 会查找指定的模板文件，然后将生成的 bundle.js（或其他配置的资源）动态插入到模板的 `<head>` 或指定位置，避免手动修改 HTML 文件。 2. **动态...
webpack的相关配置，以及使用webpack打包文件时用到的loader以及相关插件的使用
最新发布
2401_84139049的博客
04-16 773
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
HtmlWebpackPlugin chunks
weixin_46147758的博客
02-28 340
webpack. HtmlWebpackPlugin chunks
webpack 配置html,webpack 插件html-webpack-plugin的具体使用
weixin_33467061的博客
06-09 602
本文介绍了webpack 插件html-webpack-plugin的具体使用，分享给大家，具体如下：这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模板加载生成的 bundles，或者自己加载这些 bund...
webpack HtmlWebpackPlugin插件常用配置
weixin_34310785的博客
04-02 704
webpack使用日常，使用webpack是需要压缩html模板代码请注意 var HtmlWebpackPlugin = require('html-webpack-plugin') webpackconfig = { ... plugins: [ new HtmlWebpackPlugin({ template: 'src/index....
[js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
weixin_34124577的博客
09-19 64
上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析，讲解了几个常用属性( inject, minify )以及自定义属性的添加，本文，我们继续深入他的配置选项的探讨. 一、chunks选项 这个属性非常有用，可以指定某个页面加载哪些chunk( 如：js文件 ) 我们可以用他做多个页面模...
webpack使用HtmlWebpackPlugin进行cdn配置
Msgyvcici
03-25 4904
CDN服务商的选择 在前面的文章中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如： BootCDN unpkg 其中BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CD...
html-webpack-plugin详解
tugangkai的专栏
10-16 612
html-webpack-plugin 插件的基本作用就是生成html文件。原理很简单： 将 webpack中entry配置的相关入口chunk 和 extract-text-webpack-plugin抽取的css样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件，具体插入方式是将样式link插入到head元素中，scr...
webpack 打包增加版本信息
cnmeimei的博客
08-17 926
What do we need？ 笔者目的是在vue项目打包后的 dist/index.html 文件中写入本次打包git用户、最后一次git提交信息，这样做的目的是便于线上项目的管理和防止同事之间的相互扯皮。最后打包出的效果如下图： How to do？ 版本信息需要记录 git最后一次提交作者（作者名和邮箱邮）、日期、commit HEAD，本次打包git用户和邮箱、日期，这些信息都需要使用 git 命令来获取到。在 node 中，要执行一段命令行脚步需要使用 child_process 模...
html-webpack-plugin的使用
weixin_30321449的博客
11-05 173
　　　　使用前第一步：npm install 安装html-webpack-plugin --save--dev || --save (tips:--save--dev跟--save最大的区别就是--dev安装是为了仅仅在develop开发环境所依赖的，线上运行并不需要安装也能运行的依赖)，献上webpack中文文档地址：=》http://www.jqhtml.com/7626.html ne...
html版本号 webpack_html-webpack-plugin详解
05-19
在使用 Webpack 构建项目时，我们可以使用 `html-webpack-plugin` 插件来自动生成 HTML 文件，并且将打包后的 JS/CSS 文件注入到 HTML 文件中。其中，`html-webpack-plugin` 也支持一些配置项来满足不同的需求，其中就包括设置生成的 HTML 文件中的版本号。 在生成的 HTML 文件中，我们可以通过以下方式给所有的 JS/CSS 文件添加版本号： ```html <link rel="stylesheet" href="styles.css?v=<%= htmlWebpackPlugin.options.version %>"> <script src="bundle.js?v=<%= htmlWebpackPlugin.options.version %>"></script> ``` 其中，`htmlWebpackPlugin.options.version` 是 `html-webpack-plugin` 的配置项，我们需要将其在 webpack 的配置文件中进行设置。具体操作如下： 1. 安装 `html-webpack-plugin` 插件： ```bash npm install --save-dev html-webpack-plugin ``` 2. 在 webpack 的配置文件中引入 `html-webpack-plugin` 插件： ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); ``` 3. 在 `plugins` 数组中添加 `html-webpack-plugin` 的实例，并设置 `version` 配置项： ```javascript plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', version: '1.0.0' }) ] ``` 其中，`template` 指定了模板文件，`version` 指定了版本号。 4. 在模板文件中使用 `<%= htmlWebpackPlugin.options.version %>` 来引用版本号： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My App</title> <link rel="stylesheet" href="styles.css?v=<%= htmlWebpackPlugin.options.version %>"> </head> <body> <div id="app"></div> <script src="bundle.js?v=<%= htmlWebpackPlugin.options.version %>"></script> </body> </html> ``` 这样，就可以在生成的 HTML 文件中给所有的 JS/CSS 文件添加版本号了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值