webpack打包配置，在使用extract-text-webpack-plugin插件分离js和css过程中报错

最新推荐文章于 2024-03-24 22:23:39 发布
最新推荐文章于 2024-03-24 22:23:39 发布
阅读量599 收藏
点赞数
分类专栏： webpack extract-text-webpack-plugin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42911554/article/details/88221077
版权

webpack (node:18842) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead /Users/wuqiaohong/Documents/webpackDemo/node_modules/webpack/lib/Chunk.js:849 throw new Error( ^ Error: Chunk.entrypoin

报错原因：extract-text-webpack-plugin目前版本不支持webpack4

解决方式：使用extract-text-webpack-plugin的最新的beta版

命令行输入：npm install extract-text-webpack-plugin@next

重新打包即可

晴愔
关注
专栏目录
extract-text-webpack-plugin用法详解
11-28
另一种就是使用extract-text-webpack-plugin插件，将样式文件单独打包，打包输出的文件由配置文件中的output属性指定。然后我们在入口HTML页面写个link标签引入这个打包后的样式文件。 三 插件使用 1
webpack extract-text-webpack-plugin插件抽离css报错
u010914880的博客
11-29 370
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by in #原因：extract-text-webpack-plugin还不能支持webpack4.0.0以 上的版本。查看package.json中的版本信息 npm install --save-dev extract-text-webpack-plugin@n...
vue.config.js配置打包之类操作 webpack（压缩js，css,图片）
shi19970609的博客
12-28 2098
// vue.config.js的基础配置 const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') //js css 压缩 const productionGzipExtensions = ["js", "css", 'scss']; // 需要gzip压缩的文件后缀 const merge = require("lodash.merge"); //对象合并插件 const U.
webpack学习extract-text-webpack-plugin 单独打包css
weixin_44685781的博客
03-10 383
webpack单独打包css 1.首先安装extract-text-webpack-plugin 2.在webpack.config.js里面引入 const ExtractPlugin = require(‘extract-text-webpack-plugin’) 3.配置 plugins: [ new HtmlWebpackPlugin( { title:‘ToDo’ //自动生成的...
umi + webpack4.x 提示DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` inst...
最新发布
幽灵angel的博客
03-24 1097
这个报错是由于webpack4里的Tapable类的plugin已经废弃了，需要使用hooks api来替代； 但是报错信息中没有显示提示是哪个文件导致的问题。1. 在 /config/config.js 文件中添加一行代码，再次启动项目，报错信息会提示是哪个文件导致的问题。 2. 点击报错信息，会自动打开报错的文件，定位到报错的代码 3. 将被废弃的plugin改成hooks api改为AntdProMergeLess 为当前模块的模块名称 4. 重新启动项目，发现还有另一个插件报同样的错误 5. 按
【node.js】DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
从零开始的Rem486
05-10 3348
node 服务启动之后，发现会报错 `DeprecationWarning: Tapable.plugin is deprecated. Use new API on '.hooks' instead`
详解extract-text-webpack-plugin 的使用及安装
08-27
extract-text-webpack-plugin 是一个用于 webpack 的插件，主要用来抽离 CSS 样式，防止将样式打包在 JS 中引起页面样式加载错乱的现象。 插件安装 要安装 extract-text-webpack-plugin，需要使用 npm 或 yarn ...
extract-css-chunks-webpack-plugin:从大块中提取CSS到多个样式表+ HMR
04-28
如果您喜欢我们的工作，请查看我们基于Redux的路由器或其后继者， Extract-css-chunks-webpack-plugin :bottle_with_popping_cork: :bottle_with_popping_cork: :bottle_with_popping_cork: 我们非常高兴宣布Webpack...
theme-css-extract-webpack-plugin:一个webpack 插件，用于提取对应的`multipleScopeVars`主题 css 文件
05-04
@zougt/theme-css-extract-webpack-plugin这个 webpack 插件主要用于使用了和的 webpack 工程将对应的multipleScopeVars主题 css 提取出独立的 css 文件提取主题 css 文件的操作只在 webpackConfig.mode:"production...
extract-text-webpack-plugin用法
weixin_34253539的博客
02-13 728
一 背景最近在做一个项目，项目本身是用vue-cli创建的单页面应用，由于项目扩展需要创建多页面，所以需要对不同的html分别进行css文件打包。于是开始研究extract-text-webpack-plugin插件。二 插件介绍打包样式有两种方法，一种是使用style-loader自动将css代码放到生成的style标签中，并且插入到h...
【解决方案】Webpck Tapable.plugin is deprecated. Use new API on `.hooks` instead xxx
CSDN前端知识共享
03-14 1万+
问题 在执行webpack构建过程中，出现 DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead emit告警问题。 分析原因 这是因为使用的webpack插件中，使用了旧的API导致的。 而官方文档最新提供的API如下: 官方文档 参考源码 ...
vue.config.js配置，webpack打包配置详解
qq_42238554的博客
10-26 1万+
webpack打包编译 我们可以使用npm run build进行编译项目，生成文件，生成后的文件才可以上传到服务器上被服务器识别。 如下操作，我们输入npm run build进行编译。 编译成功后，我们在文件夹目录中会发现多了一个dist文件夹，里面就是我们编译后的文件，可以直接把这个文件放到服务器中。 ...
DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
wz19971020的博客
01-20 6722
webpack报错 DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead 查了一下资料，报错原因是extract-text-webpack-plugin不支持webpack4 解决方式： npm install extract-text-webpack-plugin@next --save-...
webpack的extract-text-webpack-plugin插件
热门推荐
老夫风清扬的博客
03-12 2万+
今天要和大家分享的webpack的插件extract-text-webpack-plugin。我们先聊聊webpack的一个打包机制，webpack本来只能能打包处理.js文件，但是通过强大的loader之后，可以打包处理各种类型的文件。比如：.css文件等。 表面上webpack通过loader可以打包各种文件了，已经完美了。但是在某些场景中也存在着问题的，比如我们的css的内容都被打包到bun...
webpack(7)_CSS_使用extract-text-webpack-plugin提取css
renzhongrui的博客
08-05 6327
webpack(7)CSS提取css
DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead解决办法
hph的博客
01-02 6206
extract-text-webpack-plugin目前版本不支持webpack4 解决：
webpack4.x抽取css【extract-text-webpack-plugin与mini-css-extract-plugin】
讨厌走开啦
11-08 1万+
本文主要记录笔者在使用webpack抽取css时遇到的一些问题。 参考文档： https://www.npmjs.com/package/extract-text-webpack-plugin https://www.npmjs.com/package/mini-css-extract-plugin 项目的初始诉求是利用webpack来管理css（合并），并增加hash（性能优化），当前项目使用w...
webpack与extract-text-webpack-plugin版本冲突问题解决
yanya_的博客
04-25 1万+
描述：在webpack4.0中使用“extract-text-webpack-plugin”之后，生产环境下报错，如何解决 (node:4728) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead(node:4728) DeprecationWarning: Tapable.apply...
webpack插件之extract-text-webpack-plugin
qq_29055201的博客
03-19 1279
作用 extract-text-webpack-plugin插件主要是为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象。 安装 npm i extract-text-webpack-plugin -D 使用 在webpack.config.js中进行配置 1.引入extract-text-webpack-plugin const ExtractTextPlugin = req...
使用mini-css-extract-plugin插件让webpack将css打包到css目录中 路径发生错误
06-06
如果使用 `mini-css-extract-plugin` 插件让 webpack 将 CSS 打包到一个单独的 CSS 文件中，而 CSS 文件中的 URL 路径发生了错误，一般有两种情况： 1. CSS 中的相对路径错误：在 CSS 文件中使用的相对路径应该相对于 CSS 文件的位置来解析，而不是相对于 HTML 文件或 JS 文件的位置。如果你使用 `MiniCssExtractPlugin.loader` 作为 CSS loader，那么 CSS 文件会被提取到 `output.path` 目录下的某个位置，而不是和 JS 文件同级的位置。因此，你需要在配置中指定 `publicPath` 参数来指定 CSS 文件在服务器上的 URL 路径。例如： ```js const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { // ... output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", publicPath: "/", }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: "css/[name].css", }), ], }; ``` 上面的配置中，我们将 CSS 文件提取到 `dist/css` 目录下，并指定了 `publicPath` 参数为 `/`，表示所有静态资源都在根目录下。这样，在 CSS 文件中使用相对路径时，就会相对于 `dist/css` 目录来解析。 2. 图片等资源文件路径错误：如果 CSS 中包含了图片等资源文件，那么这些文件的路径也需要正确解析。一般来说，可以使用 `file-loader` 或 `url-loader` 来处理这些文件，并在 CSS 中使用相对路径来引用它们。例如： ```css /* style.css */ body { background-image: url(../images/bg.jpg); } ``` ```js // webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", ], }, { test: /\.(png|jpe?g|gif|svg)$/i, use: [ { loader: "url-loader", options: { limit: 8192, name: "images/[name].[hash:8].[ext]", }, }, ], }, ], }, }; ``` 上面的配置中，`url-loader` 会将小于 8KB 的图片文件转换为 base64 编码的 Data URL，而大于 8KB 的文件会被转换为单独的文件，并存放到 `dist/images` 目录下。在 CSS 文件中使用相对路径 `../images/bg.jpg` 就可以正确引用这个图片文件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值