深入浅出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的更多相关文章

  1. 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 ...

  2. Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

    在webpack的管理输出的部分,设定HtmlWebpackPlugin部分,运行npm run build 会报错 Error: Cannot find module 'webpack/lib/no ...

  3. 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 一. 问题描述 在 ...

  4. 全局安装的 webpack运行时 报错 Error: Cannot find module 'webpack' ......

    全局安装的webpack   安装指令如下 cnpm install wepack -save-dev -g 但是 在我的项目空间运行webpack指令的时候 会报如下错误 为了方便抓取{ Error ...

  5. webpack.config.js配置遇到Error: Cannot find module '@babel/core'问题

    在webpack配置,将ES6转成ES5的时候,,出现Error: Cannot find module '@babel/core'错误最初以为是babel-core没有安装上.重装了好几遍babel ...

  6. Error: Cannot find module 'webpack'错误解决

    $ npm install webpack -g $ npm install webpack-cli -g 全局安装webpack $ npm run dev Error: Cannot find m ...

  7. 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 ...

  8. 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 ...

  9. Error: Cannot find module 'webpack'

    运行 npm start 报错 Error: Cannot find module 'webpack' 安装了 npm install --save-dev webpack cnpm install ...

随机推荐

  1. LeetCode36.有效的数独 JavaScript

    判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一个以粗实线分隔的 ...

  2. CSS块级元素与行内元素

    CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性.  行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...

  3. 微服务—熔断器Hystrix

    前言在微服务架构中,我们将系统拆分成了一个个的服务单元,各单元应用间通过服务注册与发现的方式互相依赖. 由于每个单元都在不同的进程中运行,依赖通过远程调用的方式执行,这样就有可能因为网络原因或是依赖服 ...

  4. 【Python】01 - 常见用法随见随梳理

    1. range() 和 xrange()的区别 for x in range(5): print x for x in xrange(5): print x 这么看,range和xrange返回的值 ...

  5. Web的基本工作原理、HTTP协议和URL说明

    Web工作原理 客户端和Web服务器通过HTTP协议进行通信.Web服务器有是也叫HTTP服务器或Web容器.HTTP协议采用的是请求/响应模式.即客户端发起HTTP请求,web服务器接收并解析处理H ...

  6. es6解构赋值的几个用法

    1.解构赋值可以轻松获取对象或者数组中的数据 var jsonData = { data: "111", data2: ["test","test2& ...

  7. 模板——STL队列

    C++ STL queue 容器优先队列&&队列 队列 #include<queue> #include<iostream> using namespace s ...

  8. ansible常用配置

    1.什么是Ansible 部署参考连接:http://www.ansible.com.cn/ ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfeng ...

  9. 伪类选择器a的属性

    在使用a中的四个属性时必须按照顺序来,不管用那两个都是要依照这个顺序来 1.a:link未访问过的状态 a:link{ color:red; } 2.a:visited已访问的 a:visited{ ...

  10. C# 依据鼠标坐标取网页内成员坐标.ie

    C# 根据鼠标坐标取网页内成员坐标.ie 有时候你需要后台获取ie浏览器 鼠标所在位置的元素坐标,然而你使用屏幕坐标是不可行的 所以我们需要把坐标转换成浏览器内坐标 然后再通过elementFromP ...