深入浅出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. PAT——1061. 判断题

    判断题的评判很简单,本题就要求你写个简单的程序帮助老师判题并统计学生们判断题的得分. 输入格式: 输入在第一行给出两个不超过100的正整数N和M,分别是学生人数和判断题数量.第二行给出M个不超过5的正 ...

  2. myeclipse调用loadrunner函数开发测试脚本

    myeclipse调用loadrunner函数开发测试脚本 一.使用myeclipse开发性能测试脚本 1.使用Eclipse新建一个Java工程,将目录%LoadRunner_Home%\class ...

  3. linux 常用进程使用命令

    查看进程占用pid ps aux | grep program_filter_word 杀死pid kill -

  4. AutoMapper 帮助类

    AutoMapper帮助类 /// <summary> /// AutoMapper帮助类 /// </summary> public static class AutoMap ...

  5. linux系统基础之--目录结构（基于centos7.4 1708）

  6. 学习tp5的第二天（路由）

    一.学习路由 1.phpstudy版本的环境去掉indx.php 直接访问url phpstudy配置的环境需要设置 入口目录的 .htaccess文件如下: <IfModule mod_rew ...

  7. laravel5.5源码笔记（二、服务提供者provider）

    laravel里所谓的provider服务提供者,其实是对某一类功能进行整合,与做一些使用前的初始化引导工作.laravel里的服务提供者也分为,系统核心服务提供者.与一般系统服务提供者.例如上一篇博 ...

  8. TP框架图片压缩/上传

    <-- 在前端的代码 --><form action="{:url('index/user/personal')}" method="post" ...

  9. 第一篇随笔, 正在做 ESP32 , STM32 , 树莓派 RaspberryPi 的创客工具

    先随便写写一些思路, 以后再整理. 这段时间笔者做了一些硬件开发, 领悟了一些事情. 1 - 在常规创客的角度上, 硬件开发所需的知识面比较广, 非常广, 但不算太深. 2 - 发现硬件开发由于其特殊 ...

  10. golang基础--Gocurrency并发

    Go并发特点 goroutine只是由官方实现的超级"线程池"而已,每个实例4-5kb的栈内存占用和用于实现机制而大幅减少的创建和销毁开销. 并发不是并行(多CPU): Concu ...