您可能需要一个合适的加载器来处理这种文件类型。 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"] 
} 

我试图在 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?$和如果你在loaders

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