webpack 3.8 使用 extract-text-webpack-plugin 3.0 抽取css失败:You may need an appropriate loader to handle this file type.

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}),
]
 

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

原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/8508859.html

时间: 2025-02-02 00:00:57

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

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

0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思路分享出来了,传送门在这里. 因为那份配置直到现在还有人在关注,同时最近公司帮助项目升级了 Webpack 4,趁机也把之前的配置也升级了一下,而且博客荒废了这么久,都快 9102 年了,不能连年均一篇博文都不到,所以有了下面的分享. 下面的配置主要是给在多页面下使用 Webpack 的同学在升级

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

接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install [email protected] --save-dev ),然后创建基本的项目文件夹结构,好了,我们的又一个基本项目结构就搭建好了. 第一.开始通过webpack.config.js文件配置我们的webpack项目 首先在项目文件夹demo2下面,新建一个webpack.config.js文件,这

The way of Webpack learning (I.) -- Configure Webpack from zero(从零开始配置webpack)

学习之路基于webpack3.10.0,webpack4.0之后更新. 一:开始前的配置 1.初始化项目,其实就是新建一个package.json文件,后面的命令依赖里面的配置项. npm init 2.修改npm script定义的任务,新增一项. "scripts": { "start": "webpack --config webpack.config.js" } 3.安装webpack npm i -D [email protected]

Webpack实战(一):Webpack打包工具安装及参数配置

为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会也引起了很多弊端: 需要手动维护JavaScript的加载顺序 多次请求资源,影响了加载速度 在每个script标签中,顶层作用域即全局作用域,如果没有任何处理而直接在代码中进行变量或函数声明,就会造成全局作用域的污染,也会造成命名冲突. 模块化很容易就避免这些问题,避免冲突,合并资源减少网络开销,

Sublime Text 无法使用Package Control或插件安装失败的解决方法

Sublime Text用了一年多了,公司搬家近期突然发现Package Control无法安装新插件了.尽管不影响原有功能的使用.还是要解决它.因为本人用Windows系统,仅仅讨论Windosw下的解决方法. Mac与Linux下的用户能够參照解决. 本文主要介绍Sublime Text怎样开启debug模式.分析使用过程中一些常见错误情形的解决方法. 情形一:Package Control:There are no packages available for installation.情

Sublime Text 无法使用Package Control或插件安装失败的解决方法(转)

Sublime Text用了一年多了,公司搬家最近突然发现Package Control无法安装新插件了,虽然不影响原有功能的使用,还是要解决它.由于本人用Windows系统,只讨论Windosw下的解决方法.Mac与Linux下的用户可以参照解决. 本文主要介绍Sublime Text如何开启debug模式,分析使用过程中一些常见错误情形的解决方法.情形一:Package Control:There are no packages available for installation.情形二:

Extract URL from HAR 1.0

main.bat 1 @echo off 2 color 0a 3 title Extract URL from HAR 1.0 4 5 SETLOCAL ENABLEEXTENSIONS 6 SETLOCAL ENABLEDELAYEDEXPANSION 7 8 pushd "%TEMP%" 9 10 set PARAM=%~1 11 set FILE_EXT=.har 12 13 if "%PARAM%" equ "" ( 14 echo P

webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin

当我们出现以下报错! 解决方案: // webpack配置文件 const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); //引入这行 module.exports = { mode:'none', entry:'./src/main.js', output:{ p

Webpack 4.X 从入门到精通 - plugin(二)

通过上一篇文章,我们明白了webpack的两个配置参数入口与出口,webpack会找到入口文件的地址,进去后一顿蹂躏,再通过你给的输出地址就把编译后的文件给你了.这篇文章接着去丰富webpack.config.js的内容,说一个参数叫plugins plugins plugins里面放的是插件,在webpack里有各式各样的插件能够帮你完成任何构建的事情.只有你想不到的,没有它做不到的.并且全世界的小伙伴们都在给webpack贡献开源的插件,所以插件的种类是非常丰富的. 插件能做什么 插件的作用