Reactjs 网页包呈现sass、babel和es2015-您可能需要适当的加载程序来处理此文件类型

我想将webpack配置为呈现es15、react和sass

添加sass加载代码后，我收到以下消息：

ERROR in ./src/app.jsx
Module parse failed: /home/giedrius/projects/react-redux/react-redux-seed/src/app.jsx Unexpected token (7:11)
You may need an appropriate loader to handle this file type.
| class App extends React.Component {
|   render () {
|     return <Header/>;
|   }
| }
 @ multi (webpack)-dev-server/client?http://localhost:8085 ./src/app.jsx

服务器正在启动并显示标题，因此不确定出现此消息的原因。有人有类似的问题吗

添加的代码是规则和插件数组

任何帮助都将不胜感激

---

提前感谢

您既有加载程序又有规则，它们基本上是一样的。加载程序被重命名为规则。你应该只有一个

查看此项了解更多信息：

试试这个：

模块：{
规则：[{
测试：/.jsx？$/,，
加载器：“巴别塔加载器”，
排除：/node_模块/，
选项：{
预设：['es2015'，'react']
}
},
{
测试：/\.scss$/,，
用法：ExtractTextPlugin.extract({
回退：“样式加载器”，
用法：['css-loader'、'sass-loader']
})
}
]
}

const path = require('path'); 
let webpack = require('webpack');
let ExtractTextPlugin = require("extract-text-webpack-plugin");

    module.exports = {
         entry: './src/app.jsx',
         output: {
             path: path.resolve(__dirname, 'public', 'js'),
             filename: 'app.bundle.js'
         },
         resolve: {
            extensions: ['.js', '.jsx']
         },
         module: {
             loaders: [
                {
                    test: /.jsx?$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    options: { presets: ['es2015', 'react'] }
                }
              ],
                rules: [
                  {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: ['css-loader', 'sass-loader']
                    })
                  }
                ]
      },
      plugins: [
        new ExtractTextPlugin("public/css/styles.css"),
      ]

     };