Webpack 模块解析失败。 loader react 和 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 包含到 `presets' 中。

你也可能会在这个 Link

中找到一些有用的信息

谢谢！