Webpack模块解析失败。装载机反应和巴贝尔

Question

我今天开始使用webpack，但我遇到了一些问题才能让它运行起来。

基本上我需要使用react & es6的应用程序。 Bellow你可以看到错误：

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 包含在“预设”中。

此外，您还可以找到一些有用的信息 Link

谢谢！