Webpack5 踩坑之（html-webpack-plugin）

最新推荐文章于 2024-07-18 09:55:35 发布
最新推荐文章于 2024-07-18 09:55:35 发布
阅读量1.7w 收藏 28
点赞数 8
分类专栏： 疑难杂症
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vv_bug/article/details/113845376
版权
本文记录了作者在使用Webpack5时遇到与html-webpack-plugin不兼容的问题，详细分析了问题的原因，即Webpack5.22.0版本中html-webpack-plugin返回值的变化。为了解决这个问题，作者提出了两种解决方案：一是将html-webpack-plugin版本降级，二是直接修改本地源码。在社区分享解决方案后，得到了积极的反馈。
摘要由CSDN通过智能技术生成

2021 开工第一天就给我个大大的惊喜。

ERROR in   Error: The loader "/home/project/vue3-demo/node_modules/html-webpack-plugin/lib/loader.js!/home/project/vue3-demo/public/index.html" didn't return html.
  
  - index.js:339 HtmlWebpackPlugin.evaluateCompilationResult
    [vue3-demo]/[html-webpack-plugin]/index.js:339:24
  
  - index.js:243 
    [vue3-demo]/[html-webpack-plugin]/index.js:243:22
  
  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5
  
  - async Promise.all
  
  - async Promise.all

起因

今天起了个大早，怀着无比激动的心情来到了公司，一切还是跟往常一样，当我打开电脑并打开项目，就出现了下面的场景了：

在这里插入图片描述

ERROR in   Error: The loader "/home/project/vue3-demo/node_modules/html-webpack-plugin/lib/loader.js!/home/project/vue3-demo/public/index.html" didn't return html.
  
  - index.js:339 HtmlWebpackPlugin.evaluateCompilationResult
    [vue3-demo]/[html-webpack-plugin]/index.js:339:24
  
  - index.js:243 
    [vue3-demo]/[html-webpack-plugin]/index.js:243:22
  
  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5
  
  - async Promise.all
  
  - async Promise.all

心态崩了呀，之前还是好好的，咋就凉了呢？

经过

找bug 的过程比较漫长，我就不在这里描述了～

原因

环境

  • webpack：v5.22.0
  • html-webpack-plugin：v4.5.1

由于 webpack5.22.0 版本中修改了 library 的生成方式，具体代码在 webpack5.22.0 源码文件 webpack/lib/library/AssignLibraryPlugin.js 第 279 行：

...
	result.add(
				`${
     accessWithInit(
					fullNameResolved,
最低0.47元/天 解锁文章
vv_小虫
关注
专栏目录
html-webpack-plugin插件,webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks...
weixin_29695125的博客
07-01 1364
最近在这段时间刚好在温故下webpack源码，webpack5都出来了，4还不再学习下？这次顺便学习下webpack的常用插件html-webpack-plugin。发现这个插件里面还额外加入了自己的hooks，方便其它插件来实现自己的功能，不得不说作者真是个好人。部分代码如下// node_modules/html-webpack-plugin/index.jsapp(compiler) {//...
【填坑】Webpack 5.22 上 html-webpack-plugin5.1.0 和 html-loader 的碰撞
buchiyu的博客
02-18 1422
直接说正题，webpack上html-loader和html-webpack-plugin冲突 错误代码: html-webpack-plugin插件配置 plugins: [ // html-webpack-plugin：默认会创建一个空的html文件，自动引入打包输出的所有资源（JS/CSS） // 需要有结构的HTML文件可以加一个template new HtmlWebpackPlugin({ // 复制这个./src/index.html文件，并自动引入打包输出的所有资源（.
常用的 webpack -- HtmlWebpackPlugin(了解)
最新发布
m0_71071209的博客
07-18 665
HtmlWebpackPlugin 是webpack 的插件,主要作用有以下几个方面自动生成 HTML 文件：在 webpack 构建过程中自动创建 HTML 文件。插入资源链接：自动将编译后的 CSS 和 JavaScript 文件链接插入到 HTML 中。模板支持：可以使用自定义 HTML 模板，并在构建时替换模板中的变量。环境变量：支持在 HTML 中使用 webpack 环境变量，如。多入口支持：可以为每个入口点生成不同的 HTML 文件，适用于多页面应用。
webpack 5.0 HtmlWebpackPlugin插件报错，The ‘compilation‘ argument must be an instance of Compilation
qq_21522331的博客
12-08 409
就是webpack5太新了，以前的html-web-pack-plugin支持不了了 解决方法： 先把先有的html-webpack-plugin卸载了 npm uninstall html-webpack-plugin 然后安装最最最最新的 npm i --save-dev html-webpack-plugin@next
webpack 5.0踩坑记
hexiyuanhecy的博客
02-28 285
Asset Modules { test: /\.(png|svg|jpg|jpeg|gif)$/i, // webpack 5 写法 // 习惯性写成 use: 'asset/resource'，还眼瞎看不见............. type: 'asset/resource' // webpack 4 写法 // use: 'file-loader' }, HtmlWebpackPlugin 版本不兼容，默认下载的版本为 4.5.x，会报错：.
webpack5+ 相关配套插件 部分问题汇总
小马哥的天涯
10-28 896
在测试中 使用 webpack版本5.2.0 当我们使用html-webpack-plugin(版本4.5.0)控件的时候 会出现如下错误提示 通过多次测试 发现 可能是webpack5+ 与html-webpack-plugin 不能友好兼容 最好的方案就是 webpack降级到4版本 当我使用clean-webpack-plugin （版本3.0.0）这个控件的时候 也出现错误 （如下图） 这个错误跟webpack5是没有关系的 但是官方文档 有点...
webpack版本与htmlWebpackPlugin版本对应
qi__lu的博客
12-29 2476
报错：Cannot read property 'Compilation' of undefined... webpack版本对应htmlWebpackPlugin 版本
html-webpack-inject-attributes-plugin:使用html-webpack-plugin向标签添加ext属性的简单而强大的方法
05-06
html-webpack-inject-attributes-plugin 添加自定义属性以注入标签 安装 npm install html - webpack - inject - attributes - plugin - D 用 请在html-webpack-plugin之后使用它，尤其是在webpack2 +中。 添加到...
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
html-webpack-externals-plugin :police_car_light: 已淘汰 :police_car_light: 抱歉，该模块已不再维护，其功能已由jharris4， 和。 您可能会遇到问题，并且最近的Webpack项目尚未使用它。 与一起使用以使用...
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-...
webpack-parallel-uglify-plugin：更快的uglifyjs插件
02-06
webpack-并行-uglify-插件 该插件可帮助具有多个入口点的项目加快其... import ParallelUglifyPlugin from 'webpack-parallel-uglify-plugin' ; module . exports = { plugins : [ new ParallelUglifyPlugin ( { //
webpack-filter-warnings-plugin:允许您从Webpack编译中隐藏某些警告
05-14
webpack-filter-warnings-plugin 允许您从Webpack编译中隐藏某些警告 安装 npm i -D webpack-filter-warnings-plugin 用法 // webpack.config.js const { FilterWarningsPlugin } = require ( 'webpack-filter-...
解决add-asset-html-webpack-plugin 插入无效问题
Terenceno的博客
04-11 885
于是我也照着上面百度的结果，在vue.config.js里添加了new HtmlWebpackPlugin()，执行完打包命令，发现DllPlugin打包的文件正常插入在index.html里面了，但是出现，挂载页面的#app不见了，打开页面不报错，但是页面空白…使用DllPlugin和DllReferencePlugin进行打包优化配置时发现没有报错，但是DllPlugin打包后的文件无法通过AddAssetHtmlPlugin正常的插入，不知道因为什么引起的？插件的配置，发现里面写到了。
html-webpack-plugin和loader
weixin_34358365的博客
03-23 280
var HtmlWebpackPlugin = require("html-webpack-plugin"); var config = { entry: { main: "./src/main.js", }, output: { path: __dirname + "/dist", filename: "[name]-min.js" }, module: { rules: [ { test: /...
webpack中的loader与各插件
weixin_67398884的博客
05-12 625
一、前端工程化与webpack 1.1 前端工程化解决方案 1.2 webpack的基本使用、 1.2.1 安装配置及运行webpack 实现列表隔行变色的效果步骤（jquery） 第一步生成一个package.json以便于以后安装的包都放进在里面 第四步在终端输入命令就可以在package包里安装jquery使用了 vscode里面直接ctrl+~键可以打开终端 正常来说需要导入jquery需要在html文件中script src=，但是es6中可在js文件中导入jquery，语法、 1、从jque
webpack替换html js,javascript – 在webpack中使用html-webpack-plugin和string-replace-loader
weixin_29424607的博客
06-18 594
我正在尝试替换index.html中的变量,如下所示：< meta name ='author'content = $variable>在配置文件中我使用：{test: /index\.html$/,loader: 'string-replace',query: {search: '$variable',replace: 'stuff to inject',},}在加载器数组中,然后在...
php前端开发小项目实例,Web使用webpack构建前端项目的实例代码
weixin_42098892的博客
03-10 384
当下最为流行的就是webpack和gulp了, 之前一篇我们讲了gulp, 这一篇我们来好好讨论webpack.本文主要和大家介绍Web使用webpack构建前端项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。说起webpack, 想必做前端的同学肯定不会陌生, 其实之前我们使用gulp构建的时候, 也使用了webpack的打包技术, 其实gul...
html-webpack-plugin
HJSJR的博客
08-04 964
作用 直接为项目生成一个或多个HTML文件（HTML文件个数由插件实例的个数决定），并将webpack打包后输出的所有脚本文件自动添加到插件生成的HTML文件中。通过配置，可以将根目录下用户自定义的HTML文件作为插件生成HTML文件的模板。另外，还可以通过向插件传递参数，控制HTML文件的输出。 用法： 第一步：在项目根目录下安装插件： cnpm install html-webpack-p...
Webpack5 htmlwebpackplugin用法
有趣的小良的博客
10-13 1385
Webpack是一个功能强大的模块打包工具，而HtmlWebpackPlugin是Webpack的一个插件，用于生成HTML文件并自动注入打包后的资源。介绍了Webpack5中HtmlWebpackPlugin插件的用法及其各种配置选项。借助HtmlWebpackPlugin插件，我们可以方便地生成HTML文件并自动注入打包后的资源，同时还能对HTML进行压缩和定制化配置。
详解webpack插件html-webpack-plugin的实战应用
5. CSS资源处理：如果项目中有CSS资源，即使使用了ExtractTextPlugin进行分离，`html-webpack-plugin`也会自动在HTML中插入`<link>`标签引用CSS文件。 html-webpack-plugin是webpack开发过程中的实用工具，能大大...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值