webpack Error: Cannot find module 'webpack/lib/Chunk' Extract-text-webpack-plugin 分离CSS

深入浅出webpack 1.5章节使用Extract-text-webpack-plugin分离css
安装插件后打包提示错误 Error: Cannot find module 'webpack/lib/Chunk'
可能是webpack是4.X的原因
1551681-20190312132843713-144427113.png
跟随书中步骤安装webpack会安装最新版也就是4.X版本,但是Extract-text-webpack-plugin目前(2019.3.12)仅支持到webpack3.X,想要使用的话

一种方法是使用3.x版本的webpack
另一种是使用测试版的Extract-text-webpack-plugin

我这里选用的方法是更新Extract-text-webpack-plugin的测试版
npm install -D extract-text-webpack-plugin@next

安装后再次打包依然失败,报出同样的错误
1551681-20190312132030094-1194229646.png

还是缺少webpack中的Chunk,于是重新安装了webpack
npm i -D webpack
再次执行打包构建,webpack提示安装CLI,输入yes或者执行npm install -D

1551681-20190312132312000-885289351.png

安装后再次执行打包,打包成功
1551681-20190312132357588-1532865949.png

打包后在目录里面发现没有css文件,翻看前面的代码发现忘记require css文件了,在main.css中头部引入css文件
再次打包依然报错

Error: Path variable [contenthash:8] not implemented in this context: [name]_[contenthash:8].css

随即在github上官方文档的issue中找到了问题和解决办法
1551681-20190312135317384-795915089.png

修改后打包成功,css也被分离了。
1551681-20190312135341256-449019830.png

转载于:https://www.cnblogs.com/ichiha/p/10516135.html

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值