Webpack渲染sass，babel和es2015-您可能需要适当的加载程序来处理此文件类型

Question

我想配置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

我的webpack配置看起来像这样：

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"),
      ]

     };

服务器正在启动并显示标题，因此不确定为什么出现此消息。 任何人都有类似的问题吗？

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

任何帮助，将不胜感激

提前致谢

Answer 1

您同时拥有加载程序和规则，它们基本上是同一件事。 装载程序已重命名为规则。 您应该只有其中之一。

检查此以获取更多信息： https : //webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

尝试这个：

 module: { rules: [{ test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['es2015', 'react'] } }, { test: /\\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) } ] }