Webpack模塊解析失敗。加載器反應和babel

Question

我今天開始使用webpack，我在運行時遇到了一些問題。

基本上我需要一個應用程序使用react & es6。婁你可以看到錯誤：

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './app/app.js', 
    output: { 
    path: 'dist', 
    filename: 'bundle.js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     query: { 
      stage: 0 
     }, 
     include: __dirname + '/app' 
     }, 
    ] 
    }, 
    plugins: [new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    hash: true, 
    filename: 'index.html', 
    inject: 'body' 
    })] 
}; 

到目前爲止，我曾嘗試是安裝es2015並配置爲

{ 
    test: /\.jsx?$/, 
    loader: 'babel-loader', 
    exclude: /node_modules/, 
    query: { 
     presets: ['es2015'] 
    } 
} 

但我仍然收到相同的錯誤。

任何想法如何解決它？

依賴

"dependencies": { 
    "react": "^0.14.0", 
    "react-dom": "^0.14.2", 
    "react-redux": "^4.0.0", 
    "webpack-dev-server": "^1.12.1" 
    }, 
    "devDependencies": { 
    "babel-loader": "^5.3.2", 
    "history": "^1.13.0", 
    "html-webpack-plugin": "^1.6.2", 
    "webpack": "^1.12.2" 
    } 

Answer 1

1. npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev 

webpack.config.js應該是這樣的一個：

module.exports = { 
    //.. some stuff before 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ["babel"], 
     query: { 
     presets: ['es2015','react'] // here you can add your stage-0 preset 
     } 
    }] 
    } 
    //.. some stuff after 
} 

如果你想使用babel-stage-0你必須安裝它通過npm幷包含stage-0進入`預設'。

而且也有可能你會發現一些有用的信息來源OJ這個Link

謝謝！