after vue-router lazy loading configuration, the page becomes blank
this problem does not occur when lazy loading is not configured,
when configuring lazy loading

/*const product = resolve => {
    require.ensure(["./pages/product.vue"], () => {
        console.log("entering");
        resolve()
    })
}*/
// const product= resolve=> {require(["./pages/product.vue"], resolve)};

const product= ()=>import("./pages/product");

do not configure lazy loading

import product from "./pages/product.vue"

when using

 {
        path:"/product",
        component:product,
        name:"",
        hidden: true,
    },

my webpack configuration

entry: {
        app: path.join(__dirname, "src/app.js"),
        vendor: ["vue", "vue-router", "font-awesome-loader"],
        elementUI: ["element-ui"],
        echarts: ["echarts"]
    },
    output: {
        filename: "js/[name].[chunkhash].js",
        chunkFilename: "js/[name].[chunkhash].js",
        path: path.resolve(__dirname, "dist")
    },
    resolve: {
        alias: {
            vue: "vue/dist/vue.min.js"
        },
        extensions: [".js", ".vue", ".css", ".scss"]
    },

solution guidance paid to adopt
you can see the generated chunk file, but the content is not rendered or entered into the imported view

add to my full webpack configuration, which does not use the official cli

const path = require("path");
const isDev = process.env.NODE_ENV === "development";
var CompressionPlugin = require("compression-webpack-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const cleanWebpackPlugin = require("clean-webpack-plugin");
const webpackConfig = {
    entry: {
        app: path.join(__dirname, "src/app.js"),
        vendor: ["vue", "vue-router", "font-awesome-loader"],
        elementUI: ["element-ui"],
        echarts: ["echarts"]
    },
    output: {
        filename: "js/[name].[chunkhash].js",
        chunkFilename: "js/[name].[chunkhash].js",
        path: path.resolve(__dirname, "dist")
    },
    resolve: {
        alias: {
            vue: "vue/dist/vue.min.js"
        },
        extensions: [".js", ".vue", ".css", ".scss"]
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(scss|sass|css)$/,
                use: ["css-hot-loader"].concat(ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader!sass-loader"
                }))
            },
            {
                test: /\.woff2?(\?=[0-9]\.[0-9]\.[0-9])?$/,
                use: "url-loader"
            },
            {
                test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: "./font-awesome/[name].[ext]"
                    }
                }
            },
            {
                test: /\.(png|jpg|jpeg|svg|gif|GIF|PNG|SVG|JPEG|JPG)/,
                exclude: /node_modules/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 100,
                        name: "./images/[name]-[hash:8].[ext]"
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: isDev ? ""development"" : ""production""
            }
        }),
        new htmlWebpackPlugin({
            template: path.join(__dirname, "src/index.html"),
            filename: "index.html",
            title: "FOPHome",
            favicon: path.join(__dirname, "src/images/FOPlogo.png"),
            inject: true
        }),
        new ExtractTextPlugin("[name].[contenthash].css"),
        new cleanWebpackPlugin("dist"),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            minChunks: function (module, count) {
                //  returnvue-cli
                // any required modules inside node_modules are extracted to vendor
                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(
                        path.join(__dirname, "../node_modules")
                    ) === 0
                )
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "runtime"
        })
    ]
};
if (isDev) {
    webpackConfig.output.filename = "[name].[hash].js";
    webpackConfig.devtool = "-sharpcheap-module-eval-source-map";
    webpackConfig.devServer = {
        port: 8999,
        host: "0.0.0.0" /*"0.0.0.0"*/,// "0.0.0.0"127.0.0.1localhost ip
        overlay: {
            errors: true,
        },
        open: true,
        hot: true,
        proxy: {
          
        }
    };
    webpackConfig.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
} else {
    webpackConfig.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            comments: false,        //
            compress: {
                warnings: false    //,
            }
        })),
        webpackConfig.plugins.push(
            new CompressionPlugin({
                asset: "[path].gz[query]",
                algorithm: "gzip",
                test: new RegExp(
                    "\\.(" +
                    ["js", "css"].join("|") +
                    ")$"
                ),
                threshold: 10240,
                minRatio: 0.8
            })
        )
}
module.exports = webpackConfig;