Question

我无法使用Babel和React配置Webpack。

这是我的配置文件 -

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

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

var config = {
  entry: APP_DIR + '/app1.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }
};

 module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
          xclude: /node_modules/,
        loader : 'babel-loader',
          query: {
        presets: ['es2015']
    }
      }
    ]
  }

module.exports = config;

这是我的babelrc文件

{
  "presets" : ["es2015", "react"]
}

我已经尝试了 here 中描述的步骤，但仍然遇到标题中提到的配置错误。

Answer 1

尝试使用这一简单的代码行，同样，您应该将您的babel插件从es2015 (babel-preset-es2015)切换到env (babel-preset-env)，这是现在推荐的方法。

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }

这应该是您的.babelrc文件。

{
  presets: [ 'env', 'react' ]
}

这应该有用。

Answer 2

尝试将测试表达式指定为\.jsx?$，如果要在.babelrc

中指定预设，则无需使用loaders文件

module : {
    loaders : [
      {
        test : /\.jsx?$/,
        include : APP_DIR,
        exclude: /node_modules/,
        loader : 'babel-loader',
          query: {
              presets: ['es2015', 'react', 'stage-0']
         }
      }
    ]
  }

您可能需要适当的加载程序来处理此文件类型。 Webpack和Babel

2 个答案: