webpack插件之extract-text-webpack-plugin问题总结

最新推荐文章于 2025-05-10 16:04:40 发布

爱代码的小海

最新推荐文章于 2025-05-10 16:04:40 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/qq_44747461/article/details/103616957

webpack 专栏收录该内容

1 篇文章

订阅专栏

问题1：webpack的版本过高

错误提示：Tapable.plugin is deprecated. Use new API on .hooks instead
错误原因：webpack的版本为4.x，但是css独立打包的插件不支持webpack4，所以需要下载插件的最新的beta版
解决方案：

npm install extract-text-webpack-plugin@next

问题2：webpack的版本较低

错误提示： Cannot read property 'thisCompilation' of undefined
错误原因：下载了extract-text-webpack-plugin最新的beta版本，但是此版本是要配合webpack4使用的，所以需要将webpack降到webpack3
解决方案：

先卸载执行 npm uninstall --save-dev extract-text-webpack-plugin
再安装 npm install --save-dev extract-text-webpack-plugin

注意

此处的webpack指定的使用插件时独立安装的webpack的版本并非是全局安装的webpack(即不是webpack -v显示的版本)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱代码的小海

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

webpack版本与extract-text-webpack-plugin版本不兼容导致的npm run build运行时报错

qq6412110的博客

03-06

6502

查了是由于extract-text-webpack-plugin该组件不支持webpack4.x以上版本导致。放弃使用extract-text-webpack-plugin可以解决我的webpack.config.js: { "name": "gnhhc", "version": "1.0.0", "main": "index.js", "scripts": { "...

[坑002]extract-text-webpack-plugin安装问题

3叉树先生的博客

10-04

2157

0x00错误描述 Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead 0x01产生的原因产生这个的原因大多是因为使用的webpack的版本是4.x以上的，extract-text-webpack-plugin这个4.0一下的版本是不支持webpack4....

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

extract-text-webpack-plugin用法

weixin_34253539的博客

02-13

765

一背景最近在做一个项目，项目本身是用vue-cli创建的单页面应用，由于项目扩展需要创建多页面，所以需要对不同的html分别进行css文件打包。于是开始研究extract-text-webpack-plugin插件。二插件介绍打包样式有两种方法，一种是使用style-loader自动将css代码放到生成的style标签中，并且插入到h...

MiniCssExtractPlugin插件介绍（提取css）（将CSS提取出来，单独打包成文件，能将样式与脚本分离，优化页面加载性能）（旧版：extract-text-webpack-plugin）

最新发布

Dontla的博客

05-10

1075

MiniCssExtractPlugin是webpack生态系统中的一个重要插件，专门用于将CSS提取到单独的文件中，而不是将其打包在JavaScript文件中。该插件基于webpack v5构建，能够为每个包含CSS的JS文件创建对应的CSS文件，并支持CSS的按需加载和SourceMap。支持异步加载CSS无重复编译，性能更优更易于使用和配置专为CSS设计的功能// 插入到指定元素后})// 自定义插入函数// 将链接标签插入到指定元素之前})})

Webpack安装extract-text-webpack-plugin遇见的两个问题

yangyang的专栏

10-05

1万+

前言，关于extract-text-webpack-plugin插件的使用可以参考http://www.jianshu.com/p/439764e3eff2这篇文章。1.提示Chunk.entry was removed. Use hasRuntime() 这个主要是webpack版本和extract-text-webpack-plugin插件对应的版本不一致的原因。现在我们使用的最新版是we

extract-text-webpack-plugin

weixin_34090562的博客

04-02

710

先上代码： const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { // index...

webpack3+和extract-text-webpack-plugin 时遇到 Cannot read property 'thisCompilation' of undefined 错误

qq_34672907的博客

04-28

1万+

最近接手公司前端外包出去的的项目，然后在npm run build的时候遇到了两个问题。第一点是 A complete log of this run can be found in: npm ERR! C:\Users\90422\AppData\Roaming\npm-cache\_logs\2018-04-28T09_26_42_435Z-debug.log 这个问题很简单

extract-text-webpack-plugin用法详解

11-28

于是开始研究extract-text-webpack-plugin插件。二插件介绍打包样式有两种方法，一种是使用style-loader自动将css代码放到生成的style标签中，并且插入到head标签里。另一种就是使用extract-text-webpack-...

详解extract-text-webpack-plugin 的使用及安装

08-27

Webpack 插件 extract-text-webpack-plugin 使用及安装详解插件简介 ...extract-text-webpack-plugin 插件可以帮助我们将 CSS 样式抽离出来，避免了样式打包在 JS 中引起的页面样式加载错乱的问题。

webpack4+学习笔记：7. CSS样式抽离之 extract-text-webpack-plugin 插件

weixin_44101052的博客

01-21

2389

CSS样式抽离之 extract-text-webpack-plugin 插件分析：使用 extract-text-webpack-plugin 插件可以实现样式以css文件的形式 link 到 html 页面中。这里有两种形式，一是 css 和 less 抽离到同一个 css 文件里，二是分开抽离，分别把 css 和 less 放在两个 css 文件中 link 到页面。这里区别于前一节的样...

webpack插件之extract-text-webpack-plugin

qq_29055201的博客

03-19

1355

作用 extract-text-webpack-plugin插件主要是为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象。安装 npm i extract-text-webpack-plugin -D 使用在webpack.config.js中进行配置 1.引入extract-text-webpack-plugin const ExtractTextPlugin = req...

Extract-Text-Webpack-Plugin 使用教程

gitblog_00218的博客

08-15

1118

Extract-Text-Webpack-Plugin 使用教程 extract-text-webpack-plugin项目地址:https://gitcode.com/gh_mirrors/ext/extract-text-webpack-plugin 项目介绍 Extract-Text-Webpack-Plugin 是一个用于从 JavaScript 模块中提取 CSS 到单独文件的 Web...

webpack中的extract-text-webpack-plugin插件使用方法总结

weixin_30364325的博客

07-22

308

为什么要用extract-text-webpack-plugin这个插件，这个插件可以为我们实现样式模块化，并且在打包的时候可以生成一个总得css文件。我是在react的项目中用到的。接下来怎么用呐？ 1，首先我们npm安装 npm install extract-text-webpack-plugin --save-dev. 2，在webpack.config.js中进行配置首先我们要引...

php渲染css插件,css文件实现分离的插件（extract-text-webpack-plugin）的用法

weixin_39926540的博客

04-05

173

本篇文章给大家带来的内容是关于css文件实现分离的插件(extract-text-webpack-plugin)的用法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。css分离：extract-text-webpack-plugin1、安装该插件：for webpack 1npm install –save-dev extract-text-webpack-plugin@1.0.1...

extract-text-webpack-plugin报错

追逐丶的博客

12-17

3826

一、问题产生好好的webpack项目，本来正常跑，正常编译。结果某天突然就这样： ERROR in ./node_modules/_extract-text-webpack-plugin@3.0.0@extract-text-webpack-plugin/dist/loader.js?{“omit”:1,“remove”:true}!../pcClient/node_modules/_vue-......

webpack4.0中使用extract-text-plugin打包报错

weixin_30808693的博客

09-09

209

需升级extract-text-webpack-plugin npm i --save-devextract-text-webpack-plugin@next 会下载到 extract-text-webpack-plugin@4.0.0-beta 然后再打包就OK了~ 转载于:https://www.cnblogs.com/Health-zhang/p/114928...

extract-text-webpack-plugin问题

10-18

119

extract-text-webpack-plugin目前版本不支持webpack4。使用最新beta版npm install extract-text-webpack-plugin@next 原文 https://blog.youkuaiyun.com/u011215669/article/details/81269386 转载于:https://www.cnblogs.com/xi...

webpack 4+使用了extract-text-webpack-plugin插件后，编译出错

skyandairchild的博客

05-14

739

出现的问题：DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead 解决的方法：npm install extract-text-webpack-plugin@next

webpack与extract-text-webpack-plugin版本冲突问题解决