Vue Router報錯 Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext

起因： 拉舊項目重跑發現運行報錯，猜測是包更新導致部分寫法不兼容。之后發現是原寫法在webpack4中不兼容。所以這篇文章主要講兩部分：

1. 如何解決webpack4 動態編譯import報錯

2. imoort 和 require到底有什么區別？兩者是否可以無縫替換？

1 解決報錯

2 require/import的關系和區別？

1. require/exports 和 import/export出現順序

先有require/exports 才有 import/export ； import / export 其實是個弟弟，最后都會被babel編譯為 require / exports

2.為啥 export 是不厲害，它不是 ES6 支持的規范嗎？

答：出生背景不同。 require在2010年左右誕生，CommonJS 中大量引用了 require， 而 CommonJS又是node.js的規范。而import作為ES6的規范，大概在14.15年才被大家熟知。 同時babel會將import編譯成 require（為了能夠引用npm包）所以，import當然不能完全替換require，因為所有import，最后都會被轉化成require。至少在CommonJS依舊作為node.js規范的今天是不可以的。

3.為什么我們經常使用import，而不經常使用require?

 答：  
    1. import只是請求模塊中需要的部分， require是整包加載。相比之下import性能更好一點，節約了內存
    2. import是異步加載，require同步加載。也就是說如果你同時有多個包需要require，則他們需依次執行。
    3. import語法更緊湊/更具聲明性，基本消除了 CommonJS 與AMD的裂痕（源自stackoverflow，參考一下就好，個人覺得掌握1.2點即可）
    4. import是靜態加載，require是動態加載。（這里只是列出二者的區別，不去討論動/靜態加載的優缺點）
    5. import是 read-only

4. 補充區別： import 是強綁定，require是淺復制，僅僅是普通的值傳遞。

具體讓我們看例子：

轉載：https://blog.csdn.net/qq_31915745/article/details/107713759