webpack的extract-text-webpack-plugin报错

Question

这是我的webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ROOT_PATH = path.resolve(__dirname);
const APP_PATH = path.resolve(ROOT_PATH, 'components');
const webpack = require('webpack');

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + '/index.jsx',
output:{
    path: __dirname +'/public',
    filename: 'bundle.js',
},
devServer: {
    contentBase: "./public",
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
},
plugins: [
    new HtmlWebpackPlugin({
        title: 'todoList',    
    }),
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin("main.css")
],
module: {
    loaders: [
    {
        test: /\.scss$/,
        loaders: ExtractTextPlugin.extract('style-loader', 'css-loader','sass-loader'),
        exclude: /node_modules/
    },{
        test: /\.jsx$/,
        loader:'babel-loader',
        exclude: /node_modules/
    }, {
        test: /\.js$/,
        loader:'babel-loader',
        exclude: /node_modules/
    },{
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap'),
    },{
        test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
        loader: 'url-loader'
      }]
},
resolve:{
        extensions: ['.js', '.jsx']
    },
};

package.json:

{
  "name": "todo-list",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --profile --colors --hot",
    "build": "webpack --progress --profile --colors",
    "test": "karma start"
  },
 

然后报错信息是这样的：

npm ERR! Darwin 16.1.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! todo-list@1.0.0 dev: `webpack-dev-server --progress --profile --colors --hot`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the todo-list@1.0.0 dev script 'webpack-dev-server --progress --profile --colors --hot'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the todo-list package,
npm ERR! not with npm itself.

但是我确定我的node和npm是最新版本没有问题，这是怎么回事呢？求各位大神帮忙~

Answer 1

devtool配置有误，少了一个‘#’，应为：devtool:'#eval-source-map',你试试看

Answer 2

这种问题都是比较怪异的问题。

可以重新安装 nodejs 和 webpack-dev-server，再次运行 npm run dev

Answer 3

你的extract-text-webpack-plugin插件配置错误。
查看这个网址：https://github.com/webpack-co...

配置说明：
ExtractTextPlugin.extract([notExtractLoader], loader, [options])

loader中的配置需要这样：
ExtractTextPlugin.extract('style-loader', ['css-loader','sass-loader'])