after using webpack4 to package the file, visit the page without loading any components or reporting an error. Ask for advice

is not used. The HtmlWebpackPlugin plug-in generates the index.html,index page in the background and returns the index page when accessing the background path. Now the devServer background has been able to access the main.bundle.js and vendor.bundle.js files without reporting errors, but the components in the routing are not embedded in the specified div

related codes

this is my webpack configuration:

const path = require("path");
var webpack = require("webpack");
var merge = require("webpack-merge");
var theme = require("./theme.config.js")

const HtmlWebpackPlugin = require("html-webpack-plugin")
var autoprefixer = require("autoprefixer");
var theme = require("./theme.config.js");


var hostIP = "10.6.249.160";
var port = 3000;

module.exports = {
    target:"web",
    mode: "development",
    entry: {
        main: ["babel-polyfill", "./src/main.jsx"],
        vendor: ["redux", "react-redux", "react-router", "react-router-redux", "redux-thunk"]
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "lib"),
        publicPath:"http://" + hostIP + ":" + port + "/lib",
        chunkFilename: "[name].[chunkhash:8].chunk.js"
    },
    externals: {
        react: "React",
        "react-dom": "ReactDOM",
        immutable: "Immutable"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                include: [
                path.resolve(__dirname, "src")
                ],
                use:["babel-loader"]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                include: [
                path.resolve(__dirname, "src")
                ],
                use:[{
                    loader: "url-loader",
                    options: {
                    limit: 8192
                    }
                }]
            },
            {
                test: /\.(woff|svg|eot|ttf)\??.*$/,
                include: [
                path.resolve(__dirname, "src")
                ],
                use:[{
                    loader: "url-loader",
                    options: {
                        name: "fonts/[name].[md5:hash:hex:7].[ext]"
                    }
                }]
            },
            {
                test: /\.(css|less)$/,
                use:[{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "postcss-loader",
                    options: {
                        sourceMap: true,
                        config: {
                            path: "postcss.config.js"  // 
                        }
                    }
                }, {
                    loader: `less-loader?{"sourceMap":true,"modifyVars":${JSON.stringify(theme)}}`
                }]
            },
            {
                test: /\.json$/,
                include: [
                path.resolve(__dirname, "src")
                ],
                use:["json-loader"]
            },
        ]
   },
    resolve: {
        extensions: [ ".js", ".jsx"],
        alias: {
            components: path.resolve(__dirname, "src/components") ,
            reducers: path.resolve(__dirname, "src/reducers"),
            store: path.resolve(__dirname, "src/store"),
            routes: path.resolve(__dirname, "src/routes"),
            assets: path.resolve(__dirname, "src/assets"),
            utils: path.resolve(__dirname, "src/utils"),
            api: path.resolve(__dirname, "src/api")
        },
    },
    devtool: "cheap-module-eval-source-map",
    devServer: {
        headers: {
            "Access-Control-Allow-Origin": "*"
        },
        host:"10.6.249.160",    
        contentBase: "./",                                           //
        //historyApiFallback: true,                                         //
        inline: true,                                                     //
        hot: true,
        port: 3000,
        // proxy: {
        //     "/api/*": {
        //         target:"http://localhost:8007",
        //         secure: false, //   https 
        //         changeOrigin: true
        //     }
        // }
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    chunks: "all"
                }
            }
        }
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            react:"react"
        })
    ]
}

the following is a screenshot of the console console: also put in the background index.html file

see which god can see what the problem is