Webpack 2 (бета) не справляется с JSX, несмотря на то, что он снабжен загрузчиком Babel с предустановленным React

Question

Я использовал this guide from Webpack docs в качестве ссылки для создания конфигурации Webpack с HMR, но я получаю сообщение об ошибке, что у меня нет загрузчик для JSX. Я установил все необходимые пакеты, перечисленные в ссылке. Заметьте, я также попытался поставить мою конфигурацию Babel в .babelrc, но это дало мне те же результаты.

ERROR in ./src/index.js 
Module parse failed: /Users/macbem/Documents/Coding/Back/typeahead-todo/src/index.js Unexpected token (10:2) 
You may need an appropriate loader to handle this file type. 
| 
| ReactDOM.render(
| <AppContainer> 
|  <App /> 
| </AppContainer>, 
@ multi main 

Мои конфигурационные файлы находятся в корневом каталоге проекта, .js файлы в /src/. Мой WebPack конфигурации выглядит следующим образом:

// webpack.config.js 
const { resolve } = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    'react-hot-loader/patch', 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/only-dev-server', 
    './index.js' 
    ], 
    output: { 
    filename: 'bundle.js', 
    path: resolve(__dirname, 'dist'), 
    publicPath: '/' 
    }, 
    context: resolve(__dirname, 'src'), 
    devtool: 'inline-source-map', 
    devServer: { 
    hot: true, 
    contentBase: resolve(__dirname, 'dist'), 
    publicPath: '/' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     use: [ 
      { 
      loader: 'babel-loader', 
      options: { 
       "presets": [ 
        [ "es2015", { "modules": false } ], 
        "stage-2", 
        "react" 
       ], 
       "plugins": [ 
       "react-hot-loader/babel" 
       ] 
      } 
      }, 
     ], 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     use: [ 
      'style-loader', 
      'css-loader?modules', 
      'postcss-loader', 
     ], 
     }, 
    ], 
    }, 

    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NamedModulesPlugin() 
    ], 
}; 

Кроме того, это мой index.js файл:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import { AppContainer } from 'react-hot-loader'; 
// AppContainer is a necessary wrapper component for HMR 

import App from './components/App'; 

ReactDOM.render(
    <AppContainer> 
    <App /> 
    </AppContainer>, 
    document.getElementById('root') 
); 

// Hot Module Replacement API 
if (module.hot) { 
    module.hot.accept('./components/App',() => { 
    const NewApp = require('./components/App').default 
    render(NewApp) 
    }); 
} 

Answer 1

Edit: все, что я говорил раньше было неправильно, игнорировать его, много вещей изменилось в WebPack 2 и то, что я сказал, больше не применяется.

Пошел вперед и попробовал это для себя, и я думаю, что нашел проблему: версия webpack в ссылке (beta.20) фактически не поддерживает синтаксис «module.rules.use». Я не совсем уверен, какая версия бета-версии начала его поддерживать, но бета-версия 25 работает.

Так что если вы делаете npm uninstall webpack --save и npm install webpack@2.1.0-beta.25 --save, он должен (надеюсь) все работать.