起因： 拉舊專案重跑發現執行報錯，猜測是包更新導致部分寫法不相容。之後發現是原寫法在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)

export function getBackendRoutes(routes) {
  const res = []
  const keys = ['path', 'name', 'children', 'redirect', 'alwaysShow', 'meta', 'hidden']
  routes.forEach(item => {
    // alert('getBackendRoutes.routes item===' + JSON.stringify(item))
    const newItem = {}
    if (item.component) {
      
 
if (item.component === 'layout/Layout') {
        newItem.component = Layout
      } else if (item.component === 'Layout') {
        newItem.component = Layout
      } else {
        const view = 'error-page/404'
        // newItem.component = () => import(`@/views/${view}`)
        // newItem.component = () => import(`@/views/error-page/404`)
 

        newItem.component = (resolve) => require([`@/views/${view}`], resolve)
      }
    }