Webpack-Rendering Sass, Babel und Es2015 - Sie benötigen möglicherweise einen entsprechenden Loader, um diesen Dateityp zu behandeln

Question

Ich möchte Webpack zu render es15 zu konfigurieren, reagieren und sass.

Nachdem ich Code für sass Laden habe ich folgende Meldung:

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 

Meine webpack Config wie folgt aussieht:

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

    }; 

Server startet und Header zeigt, so unsicher, warum ist diese Nachricht erscheint. Jeder hatte ähnliche Probleme?

Der Code, der hinzugefügt wurde, war Regeln und Plugin-Array.

Jede Hilfe wäre

Vielen Dank im Voraus

Answer 1

Sie haben beide Lader und Regeln zu erkennen ist, sind sie im Grunde das gleiche. Lader wurde in Regeln umbenannt. Du solltest nur einen von ihnen haben.

prüfen diese für weitere Informationen: https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

Versuchen Sie folgendes:

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