Do not use vuejs routing lazy load, directly use require to introduce files, why does it not work? Can you help with this?

problem description

want to package all js files into one js file!

the environmental background of the problems and what methods you have tried

A js file can be packaged with require, but the page cannot be displayed after packaging

related codes

/ / Please paste the code text below (do not replace the code with pictures)

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

export default new Router({
    // mode: "history",
    base: process.env.BASE_URL,
    routes: [{
        path: "/",
        redirect: {
            name: "index"
        },
    },
    //
    {
        path: "/index",
        name: "index",
        component: require("./views/index/Index.vue"),

    },
    {
        path: "/games",
        name: "games",
        component: require( /* webpackChunkName: "index" */ "./views/index/Games.vue"),

    },

const path = require("path")
const HTMLPlugin = require("html-webpack-plugin")
const webpack = require("webpack")
const ExtractPlugin = require("extract-text-webpack-plugin")
const fs = require("fs");
const mainFile = "index.js";

const isDev = process.env.NODE_ENV === "development"
const srcRoot = path.resolve(__dirname, "src");


const config = {
    target: "web",
    entry: path.join(__dirname, "src/main.js"),
    output: {
        filename: "pk-skin.min.js",
        path: path.join(__dirname, "dev")
    },
    resolve: {
        alias: {
            components: path.resolve(srcRoot, "components"),
            "@": path.resolve(srcRoot),
            "vue$": "vue/dist/vue.esm.js"
        },
        extensions: ["*", ".js", ".vue", ".json"]
    },
     devServer: {
        port: 8001,
        host: "127.0.0.1",
        overlay: {
            errors: true,
        },
        // historyApiFallback: {
        //     index: "/public/index.html"
        // },
        hot: true
    },

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.(js|jsx)$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader",
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader",
            },
            {
                test: /\.(ttf|eot|woff|woff2)$/,
                loader: "file-loader",
                options: {
                    name: "fonts/[name].[ext]",
                }
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 1024,
                            name: "fonts/[name].[hash:7].[ext]"
                        }
                    }
                ]
            }
        ]
    },
    // plugins: [
        
    //     // {
    //     //     filename: "index" + ".html",
    //     //     template: "index" + ".html"
    //     // }
    // ]
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: isDev ? ""development"" : ""production""
            }
        }),
        // new webpack.optimize.CommonsChunkPlugin({ //v5 2
        //     async: "async-common",
        //     children: true, //  `true`  chunk 
        //     minChunks: 2
        // }),
        // new webpack.optimize.CommonsChunkPlugin({ //v2 lodash
        //     name: "vendor",
        //     minChunks: 1
        // }),
        new HTMLPlugin()
    ]
}

if (isDev) {
    config.module.rules.push({
        test: /\.styl/,
        use: [
            "style-loader",
            "css-loader",
            {
                loader: "postcss-loader"
                // options: 
                //     sourceMap: options.sourceMap,
                //     modules: true  //
                // }
            },
            "stylus-loader"
        ]
    })
    config.devtool = "-sharpcheap-module-eval-source-map"
    config.devServer = {
        port: 8000,
        host: "0.0.0.0",
        overlay: {
            errors: true,
        },
        hot: true
    }
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
} else {
    config.entry = {
        app: path.join(__dirname, "src/main.js")
        // vendor: ["vue"]
    }
    config.devtool = "-sharpsource-map"
    config.output.filename = "pk-skin.[name].min.js"
}

module.exports = config

what result do you expect? What is the error message actually seen?

can be packaged into a js file, and can also be compiled ~

<h2>1,</h2> import Vue from 'vue' import Router from 'vue-router' import Main from '../pages/Main.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: Main } ] }) < H2 > 2, < / H2 > import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: require('../pages/Main.vue').default } ] })