使用 webpack、babel 设置项目失败答案

【问题标题】：Fail to set up project with webpack, babel使用 webpack、babel 设置项目失败
【发布时间】：2016-05-18 15:50:32
【问题描述】：

我正在使用 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 设置为默认加载程序。

那为什么还会出现呢？

【问题讨论】：

标签： reactjs webpack bower

【解决方案1】：

您需要将您的加载器配置放在“模块”键下。

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

【讨论】：