webpack版本与htmlWebpackPlugin版本对应

齐露

已于 2022-12-30 14:15:55 修改

阅读量3k

点赞数

文章标签： webpack 前端 javascript

于 2022-12-29 10:33:19 首次发布

本文链接：https://blog.youkuaiyun.com/qi__lu/article/details/128477592

版权

本文探讨了Webpack与htmlWebpackPlugin不同版本之间的兼容性问题，并列举了两个特定版本组合的正确搭配方式。此外还提到了Webpack版本与加载器版本的相关性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错：Cannot read property ‘Compilation’ of undefined…
在这里插入图片描述

百度了很多，大部分说的是webpack的版本与 htmlWebpackPlugin 的版本不对称
目前只知道这两个对应的：


**webpack 是^3.6.0 的，对应的 htmlWebpackPlugin 版本是2.30.1**

**webpack 是^5.0.0 的，对应的 htmlWebpackPlugin 版本是4.5.0**

补充题外话：webpack 的版本与loader的版本也有关系，说反了，是loader 与webpack的版本有关系
webpack版本是3.6.0或者2.X的：

	"css-loader": "^2.0.2",
	"file-loader": "^4.0.0",
	"less": "^3.9.0",
	"less-loader": "^4.1.0",
	"style-loader": "^0.23.1",
	"url-loader": "^4.1.1",

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

齐露

关注关注

0
点赞
踩
5

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue使用日记（16）：webpack的扩展——plugin

jimson_zhu的博客

10-18

244

plugin是什么？plugin是插件的意思，通常是用于对某个现有的架构进行扩展。 webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。 loader和plugin区别 loader主要用于转换某些类型的模块，它是一个转换器； plugin是插件，它是对webpack本身的扩展，是一个扩展器。 plugin的使用过程步骤一：通过npm安装...

html版本号 webpack_html-webpack-plugin详解

weixin_39994949的博客

12-21

825

引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面...

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

第3集丨webpack 江湖 —— 插件(plugin)的安装和使用

秋堂主的博客

07-27

1139

`webpack plugins` 插件可以完成更多 `loader` 不能完成的功能。插件(`plugin`)的使用一般是在 `webpack` 的配置信息 `plugins` 选项中指定。`Webpack` 本身内置了一些常用的插件，还可以通过 `npm` 安装第三方插件。`webpack-dev-server` 可用于快速开发应用程序。类似于`node.js `阶段用到的 `nodemon` 工具，每当修改了源代码，`webpack` 会自动进行项目的打包构建。

记录webpack 运行vue项目的巨坑！！！各种版本兼容问题！

有一个程序员的博客

08-28

1242

缺少适用于你当前 Node.js 版本和操作系统的二进制绑定。通常在 Node.js 或操作系统版本变化时会出现这种情况。是 TypeScript 的运行时库，通常用于优化 TypeScript 编译的代码。确保所有依赖都正确安装且没有版本冲突。的特定版本，但它没有被安装或满足这些要求。版本，以满足所有依赖项的要求。如果你遇到兼容性问题，考虑将。依赖版本仍然存在冲突。版本存在不兼容问题。3.x 版本可能不完全支持。的最新版本，这些版本应该与。你遇到的错误提示是关于。

webpack 和html-webpack-plugin版本对应问题

mgdj25的博客

10-20

7065

为了实现功能：配置生成预览页面。以前是要实现的效果是，直接打开设置的首页。这里由于版本对应问题，一直报错。当前版本： "devDependencies": { "html-webpack-plugin": "^2.30.1", "webpack": "^3.6.0", "webpack-cli": "^4.0.0", "webpack-dev-server": "^2.8.2" } webpack 版本和html-webp

python中setup是什么意思_『Python』setup.py简介

weixin_39797264的博客

12-04

2398

setup.py应用场合网上见到其他人这样介绍：假如我在本机开发一个程序，需要用到python的redis、mysql模块以及自己编写的redis_run.py模块。我怎么实现在服务器上去发布该系统，如何实现依赖模块和自己编写的模块redis_run.py一起打包，实现一键安装呢？同时将自己编写的redis_run.py模块以exe文件格式安装到python的全局执行路径C:\Python27\S...

webpack插件html-webpack-plugin

weixin_42541725的博客

02-27

1052

webpack插件html-webpack-plugin

webpack 编写插件兼容不同的webpack版本

weixin_39168678的博客

11-08

444

webpack 版本虽然更新到了5+，但官网很多内容都是滞后的比如插件编写，官网推荐的还是webpack3的写法 compiler.plugin('done', function() { console.log('Hello World!'); }); 但到webpack5基本是这样的 compiler.hooks.done.tap("xxxName:" ,()=>{ console.log('Hello World!'); }); 所以需要我们在编写webpack插件

webpack和webpackcil对应版本

08-19

- *1* *3* [webpack版本与htmlWebpackPlugin版本对应](https://blog.youkuaiyun.com/qi__lu/article/details/128477592)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

vue cli3生成html,vue-cli3配置webpack,htmlWebpackPlugin

weixin_34280468的博客

06-05

1286

背景项目上线后需要添加到百度搜索引擎，如何添加到百度搜索引擎参照https://jingyan.baidu.com/article/fc07f989c34dbb52ffe519a3.html。重点是需要在html中添加一个meta，于是我就直接添加了复制代码然后问持环开行打进对端架处参触架码我通会法时果题出现了，在百度进行HTML验证的时候，出直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如...

webpack对应的sass版本

最新发布

03-19

为了确保Webpack项目能够正常运行并与Sass集成，需要根据所使用的Webpack版本来选择合适的`sass-loader`版本以及对应的编译工具。以下是具体说明：对于 **Webpack 5**，应使用 `sass-loader` 的 10.x 或更高版本，...

vue-cli webpack 项目版本升级

weixin_33881140的博客

03-25

5984

包含 webpack@4 和 babel-loader@8 以及打包部分优化一键升级package.json 文件依赖版本数手动去修改dependencies中各个包的版本号太慢， so 借助了npm-check-updates工具，一键将package.json中的依赖包版本号更新为最新版本。 1、global install npm install -g npm-check-upda...

shanshan的博客

08-07

1346

仅供学习使用。

常用的 webpack -- HtmlWebpackPlugin(了解)

m0_71071209的博客

07-18

1530

HtmlWebpackPlugin 是webpack 的插件,主要作用有以下几个方面自动生成 HTML 文件：在 webpack 构建过程中自动创建 HTML 文件。插入资源链接：自动将编译后的 CSS 和 JavaScript 文件链接插入到 HTML 中。模板支持：可以使用自定义 HTML 模板，并在构建时替换模板中的变量。环境变量：支持在 HTML 中使用 webpack 环境变量，如。多入口支持：可以为每个入口点生成不同的 HTML 文件，适用于多页面应用。

webpack 插件之Html-Webpack-Plugin

小辣抓

08-13

1853

webpack 插件之Html-Webpack-Plugin1. 为什么我们需要这个插件先来看一个应用场景。我们自己打算搭建一个网站，这个网站有很多个页面，我们为每个页面创建一大堆的css样式，js脚本，然后尝试用webpack进行打包。于是我们在webpack.config.js里这样写了：const path = require('path'); module.exports = {

webpack打包体验之plugin（html-webpack-plugin）

rose999ying的博客

03-04

490

在上一个章节中，删除掉src下的inde.html文件, npm i -D html-webpack-plugin插件；当前demo的使用版本然后到webpack.config.js中使用：运行npm run dev,就可以在dist目录下看到打包好的 html和js文件，并且html文件自动引入了打包好的js文件 html-webpack-plugin这个插件是就是帮助创建h...

html-webpack-plugin插件安装

weixin_47142668的博客

01-10

1631

webpack-dev-server自动打包功能自动进入页面、html-webpack-plugin插件使用、localhost：8080只有文件目录原因、页面Cannot Get原因

Webpack：HTML Webpack Plugin插件