鍍金池/ 問答/HTML/ webpack4動態(tài)import無法拿到chunkname

webpack4動態(tài)import無法拿到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(使用require.ensure()能正確拿到name):

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')
    }
  }
];

結(jié)果(正確拿到name):

clipboard.png

但是!?。。?!使用import:

const routes = [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "index" */ './view/index/index.vue')
  },
  {
    path: '/errorPage',
    component: () => import(/* webpackChunkName: "errorPage" */ './view/errorPage/errorPage.vue')
  },
  {
    path: '/page',
    component: () => import(/* webpackChunkName: "page" */ './view/page/page.vue')
  }
];

結(jié)果不能拿到name:

clipboard.png

有人說跟babel設(shè)置有關(guān),但我嘗試了也沒作用:
.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"
            ]
        }
    }
}

向各位大佬求解

回答
編輯回答
空白格

安裝插件 babel-plugin-syntax-dynamic-import
.babelrc中修改:

"plugins": [
  "syntax-dynamic-import"
]

參考鏈接

2017年10月31日 16:54
編輯回答
敢試

正解,忘記結(jié)帖了。贊

2018年2月25日 03:11