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

谢谢！