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.

但是，我已经安装了凉亭包并将凉亭作为默认装载机。

为什么这仍然会出现呢？

Answer 1

您需要将加载程序配置置于“模块”键下。

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

无法使用webpack，babel设置项目

1 个答案: