无法使用 webpack、babel 设置项目

Question

我正在使用 React、Bower 和 Webpack 制作示例应用程序。

我有这个 index.jsx 文件：

import React from 'react';
import {ReactDOM} from 'react-dom';
import AwesomeComponent from './AwesomeComponent.jsx';

    var App = React.createClass({
      render: function() {
        return (<p> Hello React!</p>);
      }
    });

    ReactDOM.render(<App/>, document.getElementById('app'));

我安装了以下：

npm i babel-loader babel-preset-es2015 babel-preset-react -S

我的webpack.config.js是：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  loaders : [
     {
       test : /\.jsx?/,
       loader: 'babel',
       include : APP_DIR,
       query: {
          presets: ['react', 'es2015']
       }
     }
   ]
};

module.exports = config;

我的问题是在 index.jsx 文件中我得到：

ERROR in ./src/client/app/index.jsx
Module parse failed: /path/to/file/src/client/app/index.jsx Unexpected token (7:12)
You may need an appropriate loader to handle this file type.

但是，我已经安装了 bower 包并将 bower 设置为默认加载器。

为什么还会出现这个？

Answer 1

您需要将加载程序配置放在 "module" 键下。

...
output: {
  path: BUILD_DIR,
  filename: 'bundle.js'
},
module: {
  loaders: [{
    test: /\.jsx?/,
    loader: 'babel',
    include : APP_DIR,
     query: {
        presets: ['react', 'es2015']
     }
  }]
}
...

无法使用 webpack、babel 设置项目

Fail to set up project with webpack, babel

bower

reactjs

webpack