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'] }) } ] }