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()动态引入

怎么解决？

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

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

2. 使用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"
       ],
       ...
    }
   

欢迎各位大佬指正错误。