webpack编译出错

Question

webpack编译时出错，但我没找到错在哪了。
下面是我的webpack.config.js

var webpack = require('webpack');
var path = require('path');
var srcDir = path.resolve(__dirname,'src');
var pathmap = require('./src/pathmap.json');
var nodeDir = path.resolve(__dirname,'node_modules')

module.exports = {
    entry:'./src/js/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'index.js'
    },
    modules:{
        loaders:[{
            test:/\.css$/,
            loaders:['style','css']
        }]
    },
    resolve:{
        extensions:[".js","",".css"],
        root:[srcDir,nodeDir],
        alias:pathmap,
        publicPath:"/"
    }
}

然后是我的目录结构

入口文件index.js的内容：

var $ = require('jquery');
var style = require("../css/common.css");
$('<h1>我是jquery创建的</h1>').appendTo($('body'));

以前是用另一种方式写的，这次为了结构清楚一点换了个写法，结果出错了。。。

Answer 1

行内样式真正开发中不太实用，太麻烦。我大致看了下你的webpack配置文件，有个属性你写错了，改下，你再试试。

下面的错误：

建议你用这个插件，可以检查你的webpack配置文件是否有误，否则一个错误你可能要找很久：
https://www.npmjs.com/package...

你也可以参考这篇博客去配置：
https://segmentfault.com/a/11...

Answer 2

var $ = require('jquery');
var css = require("style-loader!css-loader!../css/common.css");
$('<h1>我是jquery创建的</h1>').appendTo($('body'));

改写入口文件，采用行内编译就没问题了，应该是我的配置有问题，有大神帮我也看看呗

Answer 3

loaders: [
    {test:/\.css$/, loader: 'style!css'}
]

Answer 4

resolve中的第一个extensions数组中的第一个为‘’，然后才是你要检索文件的后缀

第二个，看报错应该是css报错，loader如一楼的答案，或者这样