【webpack】webpack的html-webpack-plugin中的title不起作用？（已解决）

解决Webpack中html-webpack-plugin配置title无效问题

原创于 2023-04-01 22:49:23 发布 · 815 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #html #前端

webpack 专栏收录该内容

11 篇文章

订阅专栏

在Webpack配置中使用html-webpack-plugin时，仅设置title选项并不足以更新HTML文件的title标签。需要在index.html中引入htmlWebpackPlugin.options.title变量来动态插入标题。正确做法是在HTML模板中添加<title><%=%>htmlWebpackPlugin.options.title</title>，这样才能使Webpack构建时自动更新页面标题。

只是在webpack中的html-webpack-plugin中配置title是不起作用的

new HtmlWebpackPlugin({
    title: 'React Common Backstage',
    template: path.resolve(__dirname, 'public/index.html')
})

还需要在index.html文件中引入变量

<title><%= htmlWebpackPlugin.options.title %></title>

现在就可以咯。
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

新生代农民工官方认证码农小拽

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

web-webpack-plugin：替代html-webpack-plugin

02-03

web-webpack-plugin 想全面学习Webpack？试试它：不错替代品，可以使webpack将HTML用作条目并处理多页。安装 npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-...

html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件

02-06

html-webpack-externals-plugin :police_car_light: 已淘汰 :police_car_light: 抱歉，该模块已不再维护，其功能已由jharris4，和。您可能会遇到问题，并且最近的Webpack项目尚未使用它。与一起使用以使用...

参与评论您还未登录，请先登录后发表或查看评论

html-webpack-plugin修改页面的title的方法

11-20

vue-cli2.X：修改config目录下index.js const title = '标题1' // const title = '标题2' // const title = '标题3' module.exports = { title: title, dev: { ... }, build: { ... }, test: { ... } 接着就可以在webpack.dev.conf.js, webpack.prod.conf.js中的HtmlWebpackPlugin使用config.title new HtmlWebpackPlugin({ title: c

html-webpack-plugin模板文件中 htmlWebpackPlugin.options.title不生效的问题

PromiseCao的博客

01-04

5028

html-webpack-plugin中的 <%= htmlWebpackPlugin.options.title %> 会被html-loader当做字符串处理，所以如果想在不注释掉html-loader的情况下让<%= htmlWebpackPlugin.options.title %>生效的话，需要将模板文件改成ejs类型如果没有用到babel-loader的话这样就可以了。但如果用到了的话babel-loader又会去跑ejs文件，会报错。这里需要在配置中忽略掉e..

html-webpack-plugin 中使用 title选项设置模版中的值无效

Academia_zhen的博客

07-05

7664

在页面引入html文件的时候，由于没有相应的加载器对html进行解析加载，导致webpack打包发生错误， import tpl from './layer.html';Module parse failed:..../layer.html Unexpected token 查阅一番资料之后安装了html-loader，并在配置文件中添加了对html文件解析配置，因此在打包的时候没有出

html-webpack-plugin

mobin518的博客

02-15

669

作用: 1、根据指定的页面在内存中生成指定的页面， 2、自动将生成的xxx.js文件引用到页面中去安装使用插件说明：

webpack 修改title_html-webpack-plugin修改页面的title的方法

weixin_30538719的博客

01-30

677

vue-cli2.X：修改config目录下index.jsconst title = "标题1"// const title = "标题2"// const title = "标题3"module.exports = {title: title,dev: { ... },build: { ... },test: { ... }接着就可以在webpack.dev.conf.js, webpack....

react-app-rewire-html-webpack-plugin:重新连接create-react-app以覆盖项目中的html-webpack-plugin

05-23

重新连接create-react-app以覆盖项目中的html-webpack-plugin 让您覆盖选项安装 $ yarn add react-app-rewired react-app-rewire-html-webpack-plugin -D $ npm install react-app-rewired react-app-rewire-...

html-webpack-inject-attributes-plugin:使用html-webpack-plugin向标签添加ext属性的简单而强大的方法

05-06

请在html-webpack-plugin之后使用它，尤其是在webpack2 +中。添加到所有注入标签，在所有html中均有效 plugins = [ new HtmlWebpackPlugin ( ) , new htmlWebpackInjectAttributesPlugin ( { inject : "true" ,...

monaco-editor-esm-webpack-plugin

05-30

monaco-editor-esm-webpack-plugin 它依赖于。如果你想复制一个带有本地化的 monaco 编辑器，你可以看到用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。安装 npm install monaco-editor-...

html-webpack-plugin插件学习

长歌如梦夜

07-20

352

Install Webpack 5 npm i --save-dev html-webpack-plugin Webpack 4 npm i --save-dev html-webpack-plugin@4 Options Name Type Default Description title {String} Webpack App html-webpack-plugin设置的title，需要结合模板一起使用 filename {String | Function} index.h

vue+webpack项目动态设置页面title的方法

weixin_42333548的博客

12-20

8518

一、首先看一下webpack中如何设置页面的title 1、webapck主要是利用HtmlWebpackPlugin 替换 html页面的 title，在vue项目中，安装HtmlWebpackPlugin插件 npm install html-webpack-plugin --save-dev 安装成功后，package.json这个文件会多出一行"html-webpack-pl...

vue打包之后浏览器图标设置直接没有输出，vue打包之后浏览器图标不显示

weixin_43779406的博客

01-15

963

打包之前的部分index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <title>xxxx</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalabl.

vue-cli3的title标签中出现的htmlWebpackPlugin.options.title值进行修改

热门推荐

高先生的猫

05-19

1万+

发现vue -cli创建的HTML里面的title已经换成变量<%= htmlwebpack Plugin.options.title%>，这是在webpack中使用HtmlWebpackPlugin的用法，如下： <title><%= htmlWebpackPlugin.options.title %></title> 默认情况下，项目显示的标题为项目路径对应的名称，下面介绍修改htmlWebpackPlugin.options.title对应...

Vue全家桶学习-03 脚手架

qq_36662832的博客

05-04

2209

准备工作首先是要去官网下载安装node.js，之后就可以使用npm命令了 1.如出现下载缓慢请配置 npm 淘宝镜像： npm config set registry https://registry.npm.taobao.org 2.Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，请执行：vue inspect > output.js 1.安装Vue 脚手架第一步（仅第一次执行）：全局安装@vue/cli。 npm in

htmlWebpackPlugin.options.title

Lccccb的博客

07-22

1万+

const p = new Promise((reslove, reject) => { setTimeout(() => { // reslove('success'); reject('failed'); }, 2000); }) p.then(data => { console.log(data); }).catc...

Vue2.0 webpack 配置html-webpack-plugin无报错但依旧失败——一个空格引发的惨案

qq_36722315的博客

05-23

916

今天刚开始学习Vue2.0，在配置html-webpack-plugin时，没有报错，但效果就是不显示查了半天大小写，无错 // 导入HTML插件，得到一个构造函数 const HtmlPlugin = require('html-webpack-plugin'); // 创建HTML插件的实例对象 const htmlPlugin = new HtmlPlugin({ template: './src/index.html', //指定原文件的存放路径 filename: './in...

Webpack插件使用指南：html-webpack-externals-plugin

`html-webpack-externals-plugin`可以让这个过程变得简单，它会自动修改Webpack的配置，并处理供应商模块的复制和在HTML中引入。 ### 插件的工作机制当使用`html-webpack-externals-plugin`时，这个插件会在...