webpack使用css-loader提示Module build failed: Unknown word (5:1)

webpack在使用css-loader時報錯，錯誤如下

百度、谷歌、github、stackoverflow上都搜索未果，只找到刪除css-loader的方案

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

后來發現問題在於loader配置項中，css-loader和style-loader順序寫反了，必須寫成style-loader!css-loader

配置改成如下就好了

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

關於style-loader和css-loader

• css-loader 是處理css文件中的url()等

• style-loader 將css插入到頁面的style標簽順便告訴你

• less-loader 是將less文件編譯成css

• sass-loader 是將sass文件編譯成css

loader的加載順序是從右往左，從下往上

我的webpack配置文件

const path = require('path')
const webpack = require('webpack')
const autoprefixer = require('autoprefixer')
const ROOT_PATH = path.resolve(__dirname)
const APP_PATH = path.resolve(ROOT_PATH, 'src/js/main.js')
const BUILD_PATH = path.resolve(ROOT_PATH, 'dist')

module.exports = {
  entry: APP_PATH,
  output: {
    path: BUILD_PATH,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!less-loader?!postcss-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_module/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss() {
          return [autoprefixer]
        }
      }
    })
  ]
}