webpack版本与htmlWebpackPlugin版本对应

齐露

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

阅读量2.2k

点赞数

文章标签： webpack 前端 javascript

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

本文链接：https://blog.csdn.net/qi__lu/article/details/128477592

版权

报错：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
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
webpack版本与htmlWebpackPlugin版本对应

报错：Cannot read property 'Compilation' of undefined...webpack版本对应htmlWebpackPlugin 版本
复制链接

扫一扫

webpack 插件之Html-Webpack-Plugin

小辣抓

08-13

1748

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

html版本号 webpack_html-webpack-plugin详解

weixin_39994949的博客

12-21

726

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

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

webpack相关

axiaobai1999的博客

07-16

125

webpack5(v5.59.1)打包流程详解及搭建项目

油墨香^-^的博客

05-28

近期对自己负责的项目进行优化，但 webpack 这块一直有着茫然的不熟悉，本着对 webpack 打包配置及项目优化的进一步理解和学习，所以记录下自己学习的流程，加深印象，有深入的理解后再进行补充。另外，对不同版本的 webpack（比如 webpack4 和 webpack5），在一些配置的参考上会略有不同。此测试项目已上传至gitee：https://gitee.com/Faith-yin/demo_webpack，有错误及不准确之处，欢迎评论指正~

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

秋堂主的博客

07-27

886

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

webpack插件html-webpack-plugin

weixin_42541725的博客

02-27

990

webpack插件html-webpack-plugin

深入理解HtmlWebpackPlugin插件：从基础到实践

王森的博客

07-03

2130

在多入口文件打包时，入口文件非常重要，webpack 提供了对 js 的打包，但是 js 最终要挂在一个 html 文件下面，而处理这个 index.html 就是HtmlWebpackPlugin 插件在做的事情。所以对HtmlWebpackPlugin 的深入了解有利于未来多入口打包。

3. webpack 自定义模板 html-webpack-plugin插件（多页面多入口文件打包）

黄彪博客

01-20

5724

文章目录文章参考问题描述html-webpack-plugin的作用安装插件webpack.config.js 默认配置参数配置说明hashHTML如何让 title 变为配置的信息inject 文章参考 HtmlWebpackPlugin 中文文档 HtmlWebpackPlugin github webpack4 之html-webpack-plugin html-webpack-plugi...

Webpack：HTML Webpack Plugin插件

最新发布

06-13

Webpack 通过解析这些模块之间的依赖关系，构建出一个优化的依赖图，并以此生成对应的静态资源。 Webpack 的工作流程主要包括四个主要阶段：**装载（Loading）**、**解析（Parsing）**、**编译（Compiling）**和**...

webpack_use:webpack学习与测试

05-19

在配置文件 `webpack.config.js` 中，你可以设置一个或多个入口，通常以对象形式表示，键为入口名称，值为对应的文件路径。例如： ```javascript module.exports = { entry: { app: './src/index.js', vendor: '...

webpack简单入门教程

04-26

- `package-lock.json`和`package.json`：npm 包管理的配置文件，`package-lock.json`记录了每个依赖的确切版本，确保团队成员和不同环境下的依赖一致性。 - `components`：可能包含你的应用程序的组件文件夹，每个...

webpack的ESM实现

03-24

例如，对于`.js`文件，如果启用了ESM，Webpack 将会应用对应的模块解析规则和加载器，将ESM语法转换为CommonJS或UMD格式，以便在浏览器中运行。此外，`json-loader`可以让Webpack直接处理JSON文件，`babel-loader`则...

配置生成预览页面，html-webpack-plugin几个能够兼容的版本

ccccchoker的博客

04-03

250

"devDependencies": { "html-webpack-plugin": "^3.2.0", "webpack": "^4.20.2", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.9" }

webpack常用的插件 htmlWebpackPlugin

Xtianbaizhou的博客

06-13

194

作用：该插件将为你生成一个 HTML5 文件，在执行webpack之后生成的build文件下只有一个js文件，它不会自动生成与之对应的html文件，所以我们需要让它在build文件夹之后再生成一个html，然后直接运行build文件夹里面的html就可以看到你想要的效果1.1 安装 npm install --save-dev html-webpack-plugin1.2 配置webpack.config.js 这将会生成一个包含以下内容的文件：但是观察生成的html代码，会发现它只是生成了一个新的

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

mgdj25的博客

10-20

6787

为了实现功能：配置生成预览页面。以前是要实现的效果是，直接打开设置的首页。这里由于版本对应问题，一直报错。当前版本： "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

webpack和webpackcil对应版本

08-19

根据引用中的信息，webpack版本为^3.6.0时，对应的webpack-cli版本应为2.30.1；而当webpack版本为^5.0.0时，对应的webpack-cli版本应为4.5.0。另外，引用中提到的webpack相关依赖版本如下： - webpack版本为^4.46.0 - webpack-cli版本为^3.3.12 - webpack-dev-server版本为^3.11.3 需要注意的是，webpack的版本与loader的版本也有关系，特别是当webpack版本为3.6.0或者2.X时，以下的loader版本应该与之对应： - 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 希望这些信息能对您有所帮助。123 #### 引用[.reference_title] - *1* *3* [webpack版本与htmlWebpackPlugin版本对应](https://blog.csdn.net/qi__lu/article/details/128477592)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [webpack4相关依赖版本](https://blog.csdn.net/ThisEqualThis/article/details/124090739)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交