您可能需要一個合適的加載器來處理這種文件類型。 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'] 
     } 
     } 
    ] 
    }