解决Vue Router报错 Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext

起因： 拉旧项目重跑发现运行报错，猜测是包更新导致部分写法不兼容。之后发现是原写法在webpack4中不兼容。所以这篇文章主要讲两部分：

1. 如何解决webpack4 动态编译import报错

2. imoort 和 require到底有什么区别？两者是否可以无缝替换？

 

一、解决报错

// 原写法
export const loadView = (view) => {
  return () => import(`@/views/${view}`)
}

// webpack4 中动态import不支持以变量的方式，替换为下面的代码
export const loadView = (view) => {
  return (resolve) => require([`@/views/${view}`], resolve)
}

二、 require/import的关系和区别？

1. 先有require/exports 才有 import/export ； import / export 其实是个弟弟，最后都会被babel编译为 require / exports

2.  那你肯定想问， 为啥 export 是弟弟， 它不是 ES6 支持的规范吗？

     答： 出