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的原因

跟随书中步骤安装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
安装后再次打包依然失败,报出同样的错误

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

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

打包后在目录里面发现没有css文件,翻看前面的代码发现忘记require css文件了,在main.css中头部引入css文件
再次打包依然报错
Error: Path variable [contenthash:8] not implemented in this context: [name]_[contenthash:8].css
随即在github上官方文档的issue中找到了问题和解决办法

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

webpack Error: Cannot find module 'webpack/lib/Chunk' Extract-text-webpack-plugin 分离CSS的更多相关文章
- webpack报错:Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from '...' - Did you mean "@babel/env"?
webpack报错:Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find mo ...
- Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
在webpack的管理输出的部分,设定HtmlWebpackPlugin部分,运行npm run build 会报错 Error: Cannot find module 'webpack/lib/no ...
- webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题
下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...
- 全局安装的 webpack运行时 报错 Error: Cannot find module 'webpack' ......
全局安装的webpack 安装指令如下 cnpm install wepack -save-dev -g 但是 在我的项目空间运行webpack指令的时候 会报如下错误 为了方便抓取{ Error ...
- webpack.config.js配置遇到Error: Cannot find module '@babel/core'问题
在webpack配置,将ES6转成ES5的时候,,出现Error: Cannot find module '@babel/core'错误最初以为是babel-core没有安装上.重装了好几遍babel ...
- Error: Cannot find module 'webpack'错误解决
$ npm install webpack -g $ npm install webpack-cli -g 全局安装webpack $ npm run dev Error: Cannot find m ...
- Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'
ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\ASUS\Documents\VSCode files\Web ...
- Error: Cannot find module 'webpack/bin/config-yargs' 报错原因, webpack@4.X踩的坑~
1 .使用webpack@4.32.2时, 当我通过package.json的script去执行webpack-dev-server时, 报以下错误: Error: Cannot find modu ...
- Error: Cannot find module 'webpack'
运行 npm start 报错 Error: Cannot find module 'webpack' 安装了 npm install --save-dev webpack cnpm install ...
随机推荐
- PAT——1038. 统计同成绩学生
本题要求读入N名学生的成绩,将获得某一给定分数的学生人数输出. 输入格式: 输入在第1行给出不超过105的正整数N,即学生总人数.随后1行给出N名学生的百分制整数成绩,中间以空格分隔.最后1行给出要查 ...
- php多进程编程实现与优化
PHP多进程API 创建子进程 @params void @returns int int pcntl_fork(void) 成功时,在父进程执行线程内返回产生的子进程PID,在子进程执行线程内返回0 ...
- IOS 创建简单表视图
创建简单表视图 此实例主要实现UITableViewDataSource协议中必需要实现的两个方法tableView:numberOfRowsInSection: 和tableView:cellFor ...
- macOS:按钮类型
for (int i = 0; i < 10; i++) { for (int j = 1; j < 16; j++) { NSButton *btn = [[NSButton alloc ...
- Angular7教程-05-搭建项目环境
1. 本节说明 本节以及后面的内容我们将会通过搭建一个简单的博客程序来对angular进行介绍,项目使用前端框架是bootstrap.版本v3.3.7,另外需要安装jquery.关于bootstrap ...
- 洛谷P3690 【模板】Link Cut Tree (LCT)
题目背景 动态树 题目描述 给定n个点以及每个点的权值,要你处理接下来的m个操作.操作有4种.操作从0到3编号.点从1到n编号. 0:后接两个整数(x,y),代表询问从x到y的路径上的点的权值的xor ...
- Ubuntu下apt方式安装与更新Git
本人使用的系统 Ubuntu 18.04.1 ,使用apt安装Git: sudo apt insatll git 安装后发现不是最新的版本,更新方法: sudo add-apt-repository ...
- Nginx与Tomcat实现请求动态数据与请求静态资源的分离
上篇博客说明了Nginx在应用架构中的作用,以及负载均衡的思路.这篇实践一下其中的访问静态资源与访问动态资源的操作. 一.认识访问静态资源与访问动态资源的区别 静态资源:指存储在硬盘内的数据,固定的数 ...
- 学习ThinkPHP5的第一天(安装 连接数据库)
参考文档:thinkPHP5.0完全手册 一.安装 采用的是git安装方式: 应用项目:https://github.com/top-think/think 核心框架:https://github. ...
- nodejs知识点
rss(resident set size):所有内存占用,包括指令区和堆栈. heapTotal:”堆”占用的内存,包括用到的和没用到的. heapUsed:用到的堆的部分. external: V ...