Почему при сборке react через webpack, код отображает пустую страницу?

Question

[Александр Иванов]

после введения команды webpack компонент собирается но при запуске код реакта не работает

const path = require('path'),
    webpack = require('webpack');

module.exports = {
    //context - путь для всех файлов
    context: __dirname+'/src/',
    //entry - что передавать
    entry: {
        common: "./test.js"
    },
    //output - куда передавать
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            options: {
                babelrc: false,
                presets: ["react"], //babel-preset-react-native
                cacheDirectory: true
            }
        }]
    }
};

Код реакт

import React, { Component } from 'react';
import { render } from 'react-dom';
ReactDOM.render(
    <h1>djkkdkdk</h1>,
    document.getElementById("root")
);

Код HTML
<div id="root"></div>
при выводе bundle.js подсвучивается желтым а консоли

creact-react-app - само собой будет работать, но на практике нужно без него это запускать

________________

import { render } from 'react-dom' - судя по всему на react-dom жлуется т.к. без него bundle.js зёлыным помечено

Comments

[Антон Спирин]

посмотрите ошибки в консоли и на вкладке network, может бандл вообще не загружается.

Должно быть примерно так:

module.exports = {
  context: __dirname + '/src',
  entry: './test',

  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /\/node_modules\//,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015', 'stage-0', 'react']
          }
        }]
      },
    ],
  },
};

Если несколько entry то :

output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: '[name].js',
  },

[Александр Иванов]

Антон Спирин, bundle.js - нет запускается

[Антон Спирин]

cimonlebedev, не ясно чего нет и что запускается)

[Александр Иванов]

import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';

-так заработало видимо ReactDOM не хватало а пример подкл вроде из офф докум брал ))

Answer 1

[Александр Иванов]

import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';

- так решилось

Comments

[Антон Спирин]

Даже не заменил, что у вас импорт не правильный.
Если импортируете render, нет смысла импортировать и использовать ReactDOM:

import React, { Component } from 'react';
import { render } from 'react-dom';

render(
    <h1>djkkdkdk</h1>,
    document.getElementById("root")
);

либо:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>djkkdkdk</h1>,
    document.getElementById("root")
);

[Александр Иванов]

Антон Спирин, да вы правы )