Question

我一直在使用这个webpack配置加载babel和css加载器，但是收到错误。我的webpack配置工作得很好，如果我只使用babel加载器，但css加载器不工作。

var path = require('path');

var config = {
   entry: './main.js',

   output: {
      path : path.join(__dirname, './'),
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         },
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'style-loader!css-loader',
         }
      ]
   }
}

module.exports = config;

运行webpack时遇到的错误是

ERROR in ./~/css-loader!./main.js

Error screenshot

Answer 1

您需要为匹配.css而不是.jsx的导入配置CSS加载器。现在，您将JavaScript文件传递给css-loader，这不是有效的CSS，因此失败了。正确的加载程序配置是：

module: {
    loaders: [
      {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['es2015', 'react']
          }
      },
      {
          test: /\.css$/,
          loader: 'style-loader!css-loader',
      }
    ]
}

Answer 2

你的webpack配置中需要样式加载器：

我的一个项目示例：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css")
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css!sass")
            },
        ],
    },
...

使用css loader的Webpack配置

2 个答案: