起因： 拉旧项目重跑发现运行报错，猜测是包更新导致部分写法不兼容。之后发现是原写法在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 支持的规范吗？

     答： 出生背景不同。 require在2010年左右诞生，CommonJS 中大量引用了 require， 而 CommonJS又是node.js的规范。而import作为ES6的规范，大概在14.15年才被大家熟知。 同时babel会将import编译成 require（为了能够引用npm包）所以，import当然不能完全替换require，因为所有import，最后都会被转化成require。至少在CommonJS依旧作为node.js规范的今天是不可以的。

3 . 那我肯定会接着问，既然这样，为什么ES6还要特地以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是浅复制，仅仅是普通的值传递。  具体让我们看例子：

// demo.js
exports.count = 1;
setTimeout(() => exports.count = 3 , 500);

// test-1.js
import { count } from './demo.js';
console.log('count = ', count);
setTimeout(() => {console.log('count after 1000ms = ', count)}, 1000);

====> count = 1;
====> count after 1000ms = 3;


// test-1.js
const { count } = require('./count');
console.log('count = ', count);
setTimeout(() => {console.log('count after 1000ms = ', count)}, 1000);

====> count = 1;
====> count after 1000ms = 1;

     参考文章：

     1. https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export

     2. https://www.zhihu.com/question/56820346

     3. https://blog.csdn.net/mekave/article/details/105954542?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase