webpack 中的 require 和 import 的区别

在前端开发中，使用模块化已经成为了必要的选择。而在使用模块化时，我们可能会遇到 require 和 import 这两个关键字。它们分别是 CommonJS 和 ES6 提出的模块系统中常用的语法。而在 webpack 中，这两个关键字的用法略有不同，本文将对它们的区别进行详细介绍。

require

require 是 CommonJS 提供的模块加载系统中的语法，通常用于 Node.js 中。在 webpack 的配置文件中，我们可以将入口文件写成类似下面的代码：

const entry = {
  app: './src/index.js',
};

在代码中使用 require 语句导入其他模块：

const utils = require('./utils.js');

这样，在编译时，webpack 会解析代码中的 require 语句，将其转化为对应的依赖，最终将所有依赖打包在一起。

import

import 是 ES6 中的语法，用于在浏览器环境中异步加载 JavaScript 模块。在 webpack 中使用 import 时，它会被转化为 webpack 内部的 require 语句，本质上并没有太大的区别。但是，import 更加语义化，能够更好地描述模块的依赖关系。在 webpack 配置中，我们可以这样编写入口代码：

const entry = {
  app: './src/index.js',
};

使用 import 语句导入模块：

import utils from './utils';

在 webpack 中，我们可以结合 babel-loader 使用 ES6 语法，并将其转化为 CommonJS 语法。

区别和实践

虽然在 webpack 中使用 require 和 import 的方式不同，但是从本质上看，它们可以互相替换，没有本质的区别。但是，由于 import 更加语义化，因此建议在编写代码时尽可能使用 import 语句。

除此之外，在使用 require 语句时，我们也可以提供一个数组，用于指定依赖的路径：

const utils = require(['./utils.js'], function(utils) {
  // do something
});

这样，在编译时，webpack 将会解析数组中的路径，将所有依赖加载进来之后才执行回调函数。

在开发中，我们可能会遇到需要异步加载模块的情况。在这种情况下，我们可以使用 webpack 的 require.ensure 函数：

require.ensure(['./utils.js'], function() {
  const utils = require('./utils.js');
  // do something
});

require.ensure 函数会将依赖加载到指定的 chunk 中，然后调用回调函数。这种方式可以在需要时延迟加载模块，提高应用的性能。

总结

上述是 webpack 中 require 和 import 的区别及实践介绍。虽然语法略微有区别，但是本质上没有本质的差别。在实际使用中，我们可以根据需要来灵活使用，以提高应用的性能和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482ba5348841e9894216a39