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