Webpack4 dynamic import cannot get chunkname

webpack.base.config.js:

    entry: {
        app: "./src/index.js"
    },
    output: {
        path: config.build.assetsRoot,  // "/"
        publicPath: config.dev.assetsPublicPath,    // "static"
        filename: "[name].bundle.js",
        chunkFilename: "[name].chunk.js"
    },

router (using require.ensure ()) can get name): correctly

const routes = [
  {
    path: "/",
    component: r => {
      require.ensure([], () => r(require("./view/index/index.vue")), "index")
    }
  },
  {
    path: "/errorPage",
    component: r => {
      require.ensure([], () => r(require("./view/errorPage/errorPage.vue")), "errorPage")
    }
  },
  {
    path: "/page",
    component: r => {
      require.ensure([], () => r(require("./view/page/page.vue")), "page")
    }
  }
];

result (get name): correctly

import:

name:

some people say it has something to do with the babel setting, but it doesn"t work if I try:
.babelrc:

{
    "env": {
        "production": {
            "presets": [
                ["env", {
                    "targets": {
                        "browsers": ["last 2 version", "ie 10"]
                    },
                    "modules": false,
                    "debug": true
                }]
            ],
            "plugins": [
                "transform-runtime",
                "transform-object-rest-spread",
                "dynamic-import-webpack"
            ]
        },
        "development": {
            "presets": [
                ["env", {
                    "targets": {
                        "chrome": 60
                    },
                    "modules": false,
                    "debug": true
                }]
            ],
            "plugins": [
                "transform-object-rest-spread",
                "dynamic-import-webpack"
            ]
        }
    }
}

solve the problem with all the bigwigs

const MainLeft =() => import(/*webpackChunkName:"Fire-MainLeft"*/ '../components/Fire/MainLeft.vue'); const MainRight =() => import(/*webpackChunkName:"Fire-MainRight"*/ '../components/Fire/MainRight.vue'); const MainCenterTop =() => import(/*webpackChunkName:"Fire-MainCenterTop"*/ '../components/Fire/MainCenterTop.vue'); const MainCenterBottom =() => import(/*webpackChunkName:"Fire-MainCenterBottom"*/ '../components/Fire/MainCenterBottom.vue'); export { MainLeft, MainRight, MainCenterTop, MainCenterBottom };

{ path: '/Fire', name: 'Fire', title: '', components: { routerLeft: Fire.MainLeft, routerRight: Fire.MainRight, routerCenterTop: Fire.MainCenterTop, routerCenterBottom: Fire.MainCenterBottom, }, }