extract-text-webpack-plugin配置出错的解决办法

首先给大家分享一个巨牛巨牛的人工智能教程，是我无意中发现的。教程不仅零基础，通俗易懂，而且非常风趣幽默，还时不时有内涵段子，像看小说一样，哈哈～我正在学习中，觉得太牛了，所以分享给大家！点这里可以跳转到教程

                    

在Webpack集成extract-text-webpack-plugin中，总提示无法找到正确的loader，如下：

Module build failed: ModuleParseError: Module parse failed: Unexpected token (1:0)You may need an appropriate loader to handle this file type.ERROR in ./styles/header.css    Module parse failed: Unexpected character '@' (1:0)    You may need an appropriate loader to handle this file type.
  
  
1
2
3
4
5

开始以为是引用的问题，按照提示将代码

import 'styles/header.css'
  
  
1

改为

import 'css!styles/header.css'
  
  
1

或者

import 'css-loader!styles/header.css'
  
  
1

或者

require('css-loader!styles/header.css')
  
  
1

但错误依旧，翻阅官方文档，发现配置已经不是用“!”连接，而是多了fallback，于是按照官方示例进行更改：

{    test: /\.css$/,    loader: ExtractTextPlugin.extract({        fallback: 'style-loader',         use: ['css-loader']    })}, {    test: /\.less$/,    loader: ExtractTextPlugin.extract({        fallback: 'style-loader',         use: ['css-loader', 'less-loader']    })}
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13

在此提示一下，webpack.config既可以按照“moduel>rules>use”方式配置，也可以按照“moduel>loaders>loader”配置，都能正常工作。

完整的代码实例在我的Github。

最后，吐槽一句，webpack的官方插件文档太old了。

参考文档

1. extract-text-webpack-plugin
2. EMBEDDED STYLESHEETS(太旧了)

           

浏览人工智能教程