【webpack】使用HtmlWebpackPlugin生成页面

最新推荐文章于 2024-05-16 09:49:27 发布
最新推荐文章于 2024-05-16 09:49:27 发布
阅读量1.2k 收藏 1
点赞数
文章标签： HtmlWebpackPlugin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32629809/article/details/80524396
版权

解决使用HtmlWebpackPlugin有用html-loader来加载模板时不能输出title问题

1、在build下新建titlePlugin.js文件，结构如下

build下新建titlePlugin.js
代码如下

function TitlePlugin() {}

TitlePlugin.prototype.apply = function (compiler) {
   compiler.plugin('compilation', function(compilation) {
      compilation.plugin('html-webpack-plugin-after-html-processing', function(data, cb) {
         data.html = data.html.replace(/(<head>)/i,
            `<head><title>${data.plugin.options.title}</title>`)
         cb(null, data)
      })
   })
}

module.exports = TitlePlugin
2、在build下webpack.prod.conf文件中引入titlePlugin.js并在plugins下创建titlePlugin对象
const titlePlugin = require('./titlePlugin')
...
...
//
plugins: [
    ....
    //引入标题修改插件
    new titlePlugin(),
    //创建页面
    new HtmlWebpackPlugin({
        title: '标题'
    })
    ...
    ...
]
有心博客
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack打包后引用cdn的js_webpack使用HtmlWebpackPlugin进行cdn配置
weixin_42499201的博客
01-17 612
CDN服务商的选择在前面的文章中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如：其中BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务，项目资源同步于 cdnjs 仓库。界面相对比较好看，且支持搜索功能，...
详解webpack自动生成html页面
08-30
以上代码展示了如何利用webpack自动生成HTML页面并解决浏览器缓存问题。在项目开发中，随着代码的不断迭代，我们需要频繁打包并将更新的资源推送到服务器。然而，由于浏览器缓存机制，老用户访问时可能加载的是旧...
webpack 配置html,webpack使用HtmlWebpackPlugin进行cdn配置
weixin_32581787的博客
06-09 677
CDN服务商的选择在前面的文章中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如：其中BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务，项目资源同步于 cdnjs 仓库。界面相对比较好看，且支持搜索功能，...
标题：加速网页加载，提升用户体验——Vue Skeleton Webpack Plugin 全面解析
gitblog_00049的博客
05-16 392
标题：加速网页加载，提升用户体验——Vue Skeleton Webpack Plugin 全面解析 项目地址:https://gitcode.com/lavas-project/vue-skeleton-webpack-plugin 项目介绍 Vue Skeleton Webpack Plugin 是一款专为 Vue.js 应用设计的 Webpack 插件，它能在构建过程中自动生成骨架屏（Sk...
webpack使用HtmlWebpackPlugin进行cdn配置
Msgyvcici
03-25 4897
CDN服务商的选择 在前面的文章中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如： BootCDN unpkg 其中BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CD...
webpack 加载html模板,webpack 的htmlwebpackplugin使用自定义模板
weixin_31517893的博客
06-08 303
htmlwebpackplugin这个插件可以用来生成静态的html文件。默认内部是通过后台来生成一个html的文件。当然也可以自己使用自己的文件来生成模板。可以支持.html文件。也可以使用其他类型的模板。例如ejs。而ejs简单方便。很适合来生成我们所需的静态文件。htmlwebpackplugin的基本用法如下：首先需要在webpack的配置中require进来或者用es6的import：c...
webpack5之HtmlWebpackPlugin插件
weixin_43760969的博客
10-15 2773
当我们更改了webpack.config…js一个入口起点的名称，甚至添加了一个新的名称，生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字，此时运行页面或报错，所以用 HtmlWebpackPlugin 来解决这个问题 先看看出错的情况，将上一篇文章的webpack.config.js文件的entry入口文件的app改为app1 index.html <!doctype html> <html> <head>
webpack的使用（插件HtmlWebpackPlugin）
LQ的博客
03-30 885
与前两篇想结合1.安装HtmlWebpackPlugin插件2.在webpack.config.js中配置插件（此处实例是多页面应用）//多页面应用 plugins: [new HtmlWebpackPlugin({ title: "页面一", //指定页面名称 filename: "index.html",//指定生成的页面名称 默认生成在output指定的路径下 tem...
Webpack生成企业站静态页面 - 项目搭建
觉醒法师的专栏
03-26 1430
现在Web前端流行的三大框架有Angular、React、Vue，很多项目经过这几年的洗礼，已经都 转型使用这三大框架进行开发，那为什么还要写纯静态页面呢？比如Vue中除了SPA单页面开发，也可以使用nuxt.js实现SSR服务端渲染，满足SEO优化。但是对于那些还是在维护老项目，使用MVC、MVP进行开发，或者觉得使用nuxtjs成本较高小型项目，从历史原因和项目实际情况考虑，会退而求其次，让前端快速完成页面框架和样式，交付后端进行数据渲染。
webpack基础篇-HtmlWebpackPlugin生成html（七）
小程序博客专栏
06-29 1570
我们现在的代码里，html中引入的index.js是手动写入的，主要问题有： 我们打包好的文件有时候会带有hash（接下来一章会讲到），如果直接引入，则每次修改都需要手动修改引入。 HtmlWebpackPlugin让你可以用此插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。 1，安装HtmlWebpackPlugin npm install html-webpack-plugin -D 2，单页面：在webpack.config.js里设置plugins
webpack在内存生成html,详解html-webpack-plugin使用
weixin_35034088的博客
06-10 180
这篇文章主要介绍了html-webpack-plugin使用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件...
详解使用webpack构建多页面应用
08-28
使用webpack构建多页面应用详解 ...使用webpack构建多页面应用需要配置webpack.config.js、使用HtmlWebpackPlugin插件、配置路由、自动更新MD5戳等。在本文中，我们详细介绍了这些配置的实现方法，希望对您有所帮助。
webpack使用Vue学习案例
08-25
9. **插件的使用**：Webpack有许多插件可以提升开发效率，例如HtmlWebpackPlugin自动生成HTML文件，MiniCssExtractPlugin将CSS提取为单独文件。 通过这个学习案例，你将不仅掌握Webpack的基本用法，还能理解如何与...
webpack构建react多页面应用详解
08-29
例如，为两个页面定义入口文件，设置HTMLWebpackPlugin生成对应的HTML文件，并使用CleanWebpackPlugin清理构建目录： ```javascript const path = require('path'); const HtmlWebpackPlugin = require('...
mpu6050陀螺仪使用方法开发教程文档.docx
07-30
mpu6050陀螺仪使用方法
【SCI顶级】龙格库塔算法RUN-CNN-LSTM-Multihead-Attention温度预测【含源码 5747期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
大模型的数学之魂：统计学习理论精要
07-30
大型机器学习模型，通常简称为“大模型”，是指具有数十亿甚至数千亿参数的深度神经网络模型。这些模型因为其庞大的参数量和复杂的计算结构，能够处理非常复杂的任务和数据，展现出强大的表达能力和预测性能。大模型在自然语言处理、计算机视觉、语音识别和推荐系统等多个领域都有广泛的应用。 大模型的设计目的是通过训练海量数据来学习复杂的模式和特征，从而具备强大的泛化能力，能够对未见过的数据做出准确的预测。与参数较少、层数较浅的小模型相比，大模型虽然需要更多的计算资源和时间来训练和推理，但它们展现出了一种被称为“涌现能力”的特性，即从原始训练数据中自动学习并发现新的、更高层次的特征和模式。 大模型的发展历程可以分为几个阶段，从早期的卷积神经网络模型发展到以Transformer为代表的全新神经网络模型，再到当前以GPT为代表的预训练大模型阶段。Transformer架构因其自注意力机制而成为大模型的核心技术，它使得模型能够更好地理解和处理文本数据中的长距离依赖关系。 大模型的分类主要包括语言大模型（NLP）、视觉大模型（CV）和多模态大模型。语言大模型专注于处理文本数据和理解自然语言，而视觉大模型用
唯美淡雅四页.zip
最新发布
07-30
【简历模板】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
webpack4修改html页面的标题
05-01
webpack4是一个流行的JavaScript模块打包工具，它可以优化、打包和转换您的应用程序的静态资源。webpack4允许您修改HTML页面的标题，这是一个常见的需求。在webpack中，您可以使用html-webpack-plugin插件来修改HTML页面的标题。 html-webpack-plugin是一个webpack插件，它允许您在构建过程中生成HTML文件，并在其中包含所有生成的bundle。它允许您自定义HTML模板和内容，以及向HTML页面添加快捷方式图标和其他元素。 要使用html-webpack-plugin来修改HTML页面的标题，请按照以下步骤操作： 第一步：安装html-webpack-plugin插件 在安装webpack后，您需要安装html-webpack-plugin插件。可以通过npm install html-webpack-plugin命令进行安装。 第二步：配置html-webpack-plugin插件 在webpack配置文件中，您需要添加一个新的实例化html-webpack-plugin的选项。在该选项中，您可以定制HTML模板和标题。 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // other webpack configuration options plugins: [ new HtmlWebpackPlugin({ title: 'My App Title', template: 'src/index.html' }) ] } 在上述代码中，我们创建了一个名为HtmlWebpackPlugin的新实例，并将其添加到webpack配置文件中的插件选项中。我们在选项中传递了一个标题和HTML模板。在这种情况下，我们正在使用名为index.html的文件作为HTML模板，并将其标题设置为"My App Title"。 第三步：重新启动webpack 一旦您完成了上述配置，您可以重新启动webpack并查看您的新标题是否已成功应用于HTML页面。在此之后，如果您需要修改标题，只需编辑webpack配置文件中html-webpack-plugin的选项即可。 总之，使用html-webpack-plugin插件修改HTML页面的标题非常简单。该插件允许您轻松自定义HTML模板的内容，并在构建期间将其与生成的bundle一起构建。如果您需要自定义HTML页面的其他方面，请查阅html-webpack-plugin文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值