webpack4和webpack3在vue中动态加载路由的区别

在webpack3中加载vue动态路由时是这样的

function filterAsyncRouter(asyncRouterMap) {
  return asyncRouterMap.filter(route => {

    if (route.component) {
      // Layout组件特殊处理
      if (route.component === 'Layout') {
        route.component = Layout
      } else {
        route.component = loadView(route.component)
      }
    }
    if (route.children != null && route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })
}

const loadView = (view) => { // 路由懒加载
    return () => import(`@/views/${view}`)
}

在webpack3中是支持import这样动态引入路由的。而在webpack4中还使用import的方式引入动态路由则会报错了

error

很明显，告诉我们找不到该模块了。
PS: 造成这个情况的原因是webpack4中不在支持import()方法动态引入文件，仅限开发模式，生产模式是正常的，可以继续使用import()动态引入

怎么解决？

使用require方法引入，修改一下loadView方法

const loadView = (view) => { // 路由懒加载
    return resolve => require([`@/views/${view}`], resolve)
}

使用babel-plugin-dynamic-import-webpack
a. 安装npm install babel-plugin-dynamic-import-webpack --save-dev
b. 配置.babelrc文件或者babel.config.js文件
.babelrc

{
    ...
    "plugins": [
      "dynamic-import-webpack"
    ]
    ...
}

babel.config.js

module.exports = {
    ...
    presets: [
        ...,
        "dynamic-import-webpack"
    ],
    ...
 }

欢迎各位大佬指正错误。