您可能需要適當的加載程序來處理此文件類型。 Webpack和Babel

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"]
}

我已經嘗試了這里描述的步驟，但是仍然出現標題中提到的配置錯誤。

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?$並且如果要在loaders中指定預設，則無需使用.babelrc文件。

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