当我用webpack打包css文件时出了什么问题

Question

我用webpack来打包我的css文件，我的webpack版本是2.4.1，我遵循的是官方文件使用加载程序的webconfig方法；

​

​

我的webconfig文件：

  var path=require("path");
module.exports={
    entry:"./js/main.js",
    output:{
        path:path.join(__dirname,"js/build"),
        filename:"bundle.js"
    },
    module: {
        loaders: [
          {test:/\.css$/,loader:"css-loader!style-loader"},
          {test: /\.js$/, loader: 'jsx-loader'}
        ]
    }
}

main.js

// my entry file main.js
var React=require("react");
var path=require("path")
var ReactDOM=require("react-dom");
var MessageBoard=require("../component/messageBoard");

require("../css/main.css"); //I require the css file there

ReactDOM.render(<MessageBoard title="message"/>,
      document.getElementById("container")
)

错误日志：

​

然后，我不知道为什么，所以我尝试了另一种方式

  module: {
        loaders: [
          //{test:/\.css$/,loader:"css-loader!style-loader"}, I delete this config
          {test: /\.js$/, loader: 'jsx-loader'}
        ]
    }

main.js

var React=require("react");
var path=require("path")
var ReactDOM=require("react-dom");
var MessageBoard=require("../component/messageBoard");

require("style-loader!css-loader!../css/main.css");//use this way

ReactDOM.render(<MessageBoard title="message"/>,
      document.getElementById("container")
)

以这种方式，它工作得很好，所以我必须在第一种方法thx~中做错一些事情。

Answer 1

你的装载机顺序颠倒了。

改变这一点：

{test:/\.css$/,loader:"css-loader!style-loader"}  

对此：

{test:/\.css$/,loader:"style-loader!css-loader"}

装载机的顺序是从右到左。

这是因为它的顺序是正确的：

require("style-loader!css-loader!../css/main.css");//use this way