在前端开发中，我们常常使用 Webpack 进行模块化的开发，这样可以更好的管理我们的代码，大大提高了开发效率和代码的可维护性。而在 Webpack 中，我们经常会用到 import 和 require 两种不同的方式来引入模块，本文将深入的探讨它们之间的区别以及使用时的注意事项。
require 的使用
require 是 CommonJS 的模块化规范，Webpack 本身也是支持 CommonJS 的规范的。在 Webpack 中使用 require 引入模块时，Webpack 会根据规则去查找模块中是否存在该模块，如果不存在则会报错。另外，由于 require 是同步的，因此无法实现异步加载，这也是 require 的一个缺陷。
下面是一个使用 require 引入模块的示例代码：
const moduleA = require('./moduleA');
const moduleB = require('./moduleB');import 的使用
import 是 ES6 的模块化规范，在 Webpack 中同样也可以使用。不同于 require，import 是默认使用异步方式加载模块的，这也是 import 的优点之一。在使用 import 引入模块时，Webpack 会根据相对路径去查找模块，同时也支持使用其它组件库的相对路径进行引用。
下面是一个使用 import 引入模块的示例代码：
import moduleA from './moduleA'; import moduleB from './moduleB';
异同点
由于 require 和 import 之间确实有一些不同，下面我们将详细的介绍一下它们之间的异同点：
require 和 import 的写法
require：
const moduleA = require('./moduleA');import：
import moduleA from './moduleA';
require 和 import 的变量名
require 中的变量名是用户自定义的，在使用时可以自己任意起名字。import 中的变量名是由供应模块指定的，不能随便更改，需要注意。
require 和 import 的异步方式
require 是同步的，无法实现异步加载，因此会阻塞进程。import 是异步的，可以实现按需加载，提高了性能。
require 和 import 的兼容性
require 是 Node.js 中的模块化规范，只能在 Node.js 环境下执行，无法直接在浏览器端执行。而 import 是 ES6 中的模块化规范，需要使用 Babel 等工具进行转译才能兼容所有浏览器。
require 和 import 的使用场景
require 在 Node.js 中更加常用，主要用于后端的开发。而 import 更适用于前端场景，可以在浏览器端直接进行执行。
总结
综上所述，require 和 import 在使用方法、变量名、异步方式、兼容性和使用场景等方面都有所异同。因此我们在使用时需要根据自己的需求选择合适的方式，在实际开发中要逐步摆脱使用 require，尽量使用 ES6 中的 import 方式，以逐步迈向更加现代化的前端开发。
示例代码
在下面的示例中，我们分别使用 require 和 import 的方式进行模块引用和引入，来查看它们之间的差异。
require.js 文件
const moduleA = require('./moduleA');
const moduleB = require('./moduleB');
console.log(`moduleA.a: ${moduleA.a}`);
console.log(`moduleB.b: ${moduleB.b}`);moduleA.js 文件
const a = 1;
module.exports = {
a
}moduleB.js 文件
const b = 2;
module.exports = {
b
}import.js 文件
import moduleA from './moduleA';
import moduleB from './moduleB';
console.log(`moduleA.a: ${moduleA.a}`);
console.log(`moduleB.b: ${moduleB.b}`);上述代码中我们分别使用了 require 和 import 的方式引用了 moduleA 和 moduleB 两个模块。当然，如果你使用的是单页应用等多页应用的概念，可以在入口文件中使用零散的 require 函数或 import 关键字让浏览器不在网络请求时全部下载全部文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f338b3f6b2d6eab3cb022b