协助Webpack配置

Question

我正在尝试使用自己的webpack.config配置React应用。

运行webpack-dev-server --mode development时，我看到的是一个“样式化页面”，就像样式似乎在起作用一样，但是我看不到将文本注入到标签中。我还期望将“ index.html”输出到公共目录，但是没有文件输出。

配置如下。有人可以建议我需要什么配置才能在页面上显示世界吗？

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './style/main.less';

class Welcome extends React.Component {
    render () {
        return <h1>Hello World from React boilerplate</h1>;
    }
}

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

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: { path: __dirname + '/public', publicPath: '/', filename: 'bundle.js' }, //eslint-disable-line
    devServer: { port: 8000, contentBase: '/public', open: true },
    devtool: 'inline-source-map',
    plugins: [
        // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Development'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader', 'eslint-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
};