Why does the code display an empty page when building react via webpack?

Question

React

after the introduction of the webpack command, the component is assembled but when run, the react code does not work

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

react code

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

The HTML code when outputting
<div id="root"></div>
bundle.js is highlighted in yellow and the
creact-react-app console will work by itself, but in practice you need to run it without it because without it, bundle.js is green

Answer 1

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

- so decided