webpack打包报错Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

webpack打包环境优化的一个点:将css样式代码抽离出来。
若不抽离,可以在bundle.js中发现css代码被转化成节点样式插入到了body下;这个过程是:style-loader将外部css文件注入到html中,css内容使用css-loader进行解析,转化成js文件;因为webpack只能识别js文件。
css分离:
使用extract-text-webpack-plugin插件,该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
优点
非js文件单独打包,通过js将文件写入,可以用来单独做浏览器缓存。
目前工程中大部分用到的还是webpack3+;实际中,在不指定版本的情况下,npm默认安装的4.0.0版本,这时使用上述插件会报错
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
原因:
extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。
解决办法:
npm install –save-dev extract-text-webpack-plugin@next
会下载到+ extract-text-webpack-plugin@4.0.0-beta.0
然后在打包就正常了

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值