Webpack渲染sass，babel和es2015 - 你可能需要一個合適的loader來處理這個文件類型

Question

我想配置webpack來渲染es15，反應和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'] 
 
     }) 
 
    } 
 
    ] 
 
}