为了账号安全,请及时绑定邮箱和手机立即绑定

在webpack4.0中使用“extract-text-webpack-plugin”之后,生产环境下报错,如何解决

 (node:4728) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:4728) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
/Users/x-kxem/myWorkSpace/vue-ssr-tech/node_modules/webpack/lib/Chunk.js:460
throw new Error(
^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/Users/x-kxem/myWorkSpace/vue-ssr-tech/node_modules/webpack/lib/Chunk.js:460:9)
    at /Users/x-kxem/myWorkSpace/vue-ssr-tech/node_modules/extract-text-webpack-plugin/dist/index.js:176:47 


正在回答

8 回答

 npm install extract-text-webpack-plugin@next  执行这个试试

5 回复 有任何疑惑可以回复我~
#1

Utututu 提问者

非常感谢!执行之后的确可以编译了。但是可以说说具体的原因吗?
2018-03-01 回复 有任何疑惑可以回复我~
#2

佘小麦 回复 Utututu 提问者

我是在这找到解决办法的,具体原因你可以看看 https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701
2018-03-01 回复 有任何疑惑可以回复我~
#3

Utututu 提问者 回复 佘小麦

虽然还不是很懂、但是还是谢谢啦
2018-03-01 回复 有任何疑惑可以回复我~
#4

少侠留步 回复 Utututu 提问者

因为extract-text-webpack-plugin3.x的插件不支持webpack4.0,只有4.x的插件才支持。而由于4.x的插件还是beta版的,所以没有办法直接下载。下载的时候加了@next,表示下载最新的版本,无论是不是稳定版
2018-03-08 回复 有任何疑惑可以回复我~
#5

Utututu 提问者 回复 少侠留步

cool,懂了
2018-03-15 回复 有任何疑惑可以回复我~
#6

无悔欲 回复 Utututu 提问者

因为@next就是升级新的版本到4.0版本的意思。
2018-04-12 回复 有任何疑惑可以回复我~
#7

_Illusion 回复 Utututu 提问者

这个是由于webpack提供给第三方插件的aip更新了新的方法.hooks替代了Tapable.plugin。但是由于extract-text-webpack-plugin的3版本使用的是老的,所以报了警。试试公测版也就是@next安装的^4.0.0-beta.0,应该就没毛病了
2018-04-21 回复 有任何疑惑可以回复我~
查看4条回复

升级到4.0.0-beta.0后还是会报DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead,是什么原因呢


0 回复 有任何疑惑可以回复我~

https://www.npmjs.com/package/mini-css-extract-plugin

webpack4 使用mini-css-extrace-plugin

0 回复 有任何疑惑可以回复我~
#1

我骑单车别卡车

对的✔
2019-06-26 回复 有任何疑惑可以回复我~

Webpack4 以后对 css 模块支持的逐步完善,建议使用 mini-css-extract-plugin 插件代替 extract-text-webpack-plugin 插件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }}


0 回复 有任何疑惑可以回复我~
#1

慕粉5477404

使用上面的配置,并没有分离出css文件,能麻烦你贴一下具体的配置吗?
2018-05-25 回复 有任何疑惑可以回复我~

没有解决问题

0 回复 有任何疑惑可以回复我~

如果尝试了很多办法还是不行的,建议将以下包降为以下版本

"extract-text-webpack-plugin": "^3.0.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
0 回复 有任何疑惑可以回复我~

https://img1.sycdn.imooc.com//5ab4aa2f000132ba03100310.jpg

"extract-text-webpack-plugin": "^4.0.0-beta.0",

升到这个版本就可以了

0 回复 有任何疑惑可以回复我~
#1

立青松

这个方法在webpack4.x可以有效
2018-04-08 回复 有任何疑惑可以回复我~

我也遇到了同样的问题,加@next执行后可以编译了,但是提取不到css文件,请问 这也是版本的问题吗,有解决的办法吗

0 回复 有任何疑惑可以回复我~
#1

Utututu 提问者

提取不到css这个问题,没有遇到。这个课程中只提及到提取单独的CSS文件,并不能提取.vue文件中的css,如果要提取可能需要其他的配置
2018-03-15 回复 有任何疑惑可以回复我~
#2

陌上花开归期 回复 Utututu 提问者

webpack4都不在支持这个插件了 你是怎么在4.0用这个插件提取成功的。我试了 提取失败
2018-03-20 回复 有任何疑惑可以回复我~
#3

Utututu 提问者 回复 陌上花开归期

我跟着教程做的时候、用的也是4.0好像也没有成功。具体的解决方案、我也不清楚
2018-03-22 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

在webpack4.0中使用“extract-text-webpack-plugin”之后,生产环境下报错,如何解决

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信