webpack 3.8.1 使用 extract-text-webpack-plugin 3.0.2 抽取css时失败,报错:

ERROR in ./src/static/style/localTime.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .localTimeBox {
| color: red;
| }
@ ./node_modules/style-loader!./src/static/style/localTime.css 4:14-42 webpack-build.config.js 配置为:
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'style-loader!css-loader', {publicPath: '../'})
}
]
},
plugins: [
new ExtractTextPlugin('css/bundle.min.css', {allChunks: true}),
]

解决方法:

将webpack-build.config.js 配置改为:

module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader'],
publicPath: '../'
})
}
]
},
plugins: [
new ExtractTextPlugin('css/bundle.min.css', {allChunks: true}),
]
 

问题就解决了。具体原因好像是版本的写法问题。

webpack 3.8 使用 extract-text-webpack-plugin 3.0 抽取css失败:You may need an appropriate loader to handle this file type.的更多相关文章

  1. webpack从零开始第1课:安装webpack和webpack-dev-server

    原文地址:https://segmentfault.com/a/1190000012536871 webpack目录 第1课: 安装webpack和webpack-dev-server 第2课: 配置 ...

  2. Webpack实战(六):如何优雅地运用样式CSS预处理

    上一篇文章中,我主要分享了<Webpack如何分离样式文件>CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序,css预处理指的是在开发中我们经常会使用一些样式预编译 ...

  3. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  4. 阅读webpack代码笔记:antd-layout的webpack.config.prod.js

    'use strict'; const autoprefixer = require('autoprefixer');//自动补全css前缀 const path = require('path'); ...

  5. webpack入门和实战(一):webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

  6. 【Webpack的使用指南 02】Webpack的常用解决方案

    说是解决方案实际上更像是webpack的插件索引. 写这一篇的目的是为了形成一个所以,将来要用时直接来查找即可. 索引目录 1.自动构建HTML,可压缩空格,可给引用的js加版本号或随机数:html- ...

  7. Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

    0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思 ...

  8. webpack 快速入门 系列 —— 初步认识 webpack

    初步认识 webpack webpack 是一种构建工具 webpack 是构建工具中的一种. 所谓构建,就是将资源转成浏览器可以识别的.比如我们用 less.es6 写代码,浏览器不能识别 less ...

  9. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

随机推荐

  1. 量化交易之 tushare

    作为一名老股民,我对金融市场一直都保持长期的关注. 最近我大量接触量化交易相关的一切,发现市场力量还是蛮强大的,6年前的很多设想现在已经彻底变成现实,不得不承认市场从来不会等任何人.想好就要马上行动, ...

  2. class实现Stack

    基于class实现一个存储string类型的Stack 头文件: //stack.h #include<vector> #include<string> class Stack ...

  3. Java——自动生成30道四则运算---18.09.27

    package chuti;import java.io.PrintWriter;import java.util.Scanner;import java.io.FileNotFoundExcepti ...

  4. RedHat7.1 安装Oracle12102

    选型: 32位的内存是个瓶颈,已经是64位的时代了.使用64位的CentOS6 和 64位的Oracle 11g R2 在虚拟机器安装,采用hostonly方式设置网络 注意:能上网的网卡要设置一下I ...

  5. 在WPF中自定义控件(1)

    原文:在WPF中自定义控件(1)    在WPF中自定义控件(1):概述                                                   周银辉一, 不一定需要自定 ...

  6. java集合浅谈(一)

    一.类库结构图概览 容器对象仅能持有对象引用(对象的指针),而不是Copy对象信息,从网上搜得几张Java中集合类库的结构图,如下所示: 二.解说Collection 2.1 Collection ( ...

  7. Linux初步——常用简单命令

    散乱的记录,目前是边学边用,以后有机会再整理 curl命令 发起一个HTTP请求,如:curl "http://www.baidu.com" 加上-I选项查看HTTP协议头的信息, ...

  8. ProxySQL初体验

      Preface       As we all know,it's a common sense that separate reading and writing operations can ...

  9. Qt 实时读串口数据,并将读到的数据从网口发送出去

    需求: 1. 要试试从串口读取数据 2. 将读到的数据从网口发送出去 3.开机启动 4. 没有界面 第一部分 配置Qt Pro文件  需要Qt += serialport network 第二部分 - ...

  10. Spark性能超过Hadoop百倍

    Spark在偷换概念,Hadoop跑硬盘,Spark跑内存,地球人都知道,内存的速度可是远超硬盘一个量级,超过100倍又有什么奇怪的.如果要比,咱们都拿硬盘来跑跑看!