webpack Error: Cannot find modul

深入浅出webpack 1.5章节使用Extract-text-webpack-plugin分离css
安装插件后打包提示错误 Error: Cannot find module 'webpack/lib/Chunk'
可能是webpack是4.X的原因

image

跟随书中步骤安装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

安装后再次打包依然失败，报出同样的错误

image

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

image

安装后再次执行打包，打包成功

image

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

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

随即在github上官方文档的issue中找到了问题和解决办法

image

修改后打包成功，css也被分离了。

image