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.

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

import 'styles/header.css'

改为

import 'css!styles/header.css'

或者

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

或者

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

但错误依旧，翻阅官方文档，发现配置已经不是用“!”连接，而是多了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']
    })
}

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

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

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

参考文档

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