Webpack是一个模块打包工具，对统统文件都视为模块。它本身支持非常多的模块化方法，包括本节中涌现的所有模块化方法。
下一节我们将要学习Webpack资源入口，有必要先理解一些模块知识。
一、JavaScript模块化历史在JavaScript这门措辞最初的阶段，是没有模块化方法的，由于这门措辞设计出来的初衷是作为web小脚本利用的。后来随着其在web运用的增长，不能模块化开始限定了其运用。
这个时候社区涌现了一些模块化规范，比较著名的有CommonJS、AMD和CMD等。
社区的模块化规范可以办理一些JS模块化的问题，但各种模块化规范还是分歧一的，有学习和兼容本钱。
于是，JavaScript在订定ES6措辞标准的时候，提出了自己的模块化，也便是我们现在一样平常叫做的ES6 Module（ES6模块化）。
ES6 Module经由五年的发展后，已经广泛运用在JS开拓领域。目前，JS模块化利用的紧张是ES6 Module和CommonJS这两种。
二、ES6 ModuleES6的模块化语法紧张用import进行模块导入，export进行模块导出。
1.export模块导出 // 导出的模块有两个变量name和age，一个函数add // a.js export var name = 'Jack'; export var age = 18; export function add(a, b) { return a + b; }
上面的导出也可以换一个写法
// 导出的模块有两个变量name和age，一个函数add // b.js var name = 'Jack'; var age = 18;function add(a, b) { return a + b;} export { name, age, add };
export还可以导出匿名模块，方便在导入的时候利用
// 利用匿名(default)导出模块，这里导出的是一个工具 // c.js export default { price: 285, id: 12,}2.import模块导入
我们利用import … from '…'办法导入模块。对付匿名(default)导出的模块，我们自定义一个变量代表其导出值。
// 对付匿名(default)导出的模块c.js，我们自定义一个变量moduleC代表其导出值 // d.js import moduleC from './c.js' console.log(moduleC) // 掌握台输出一个工具｛price: 285, id: 12｝
对付非default导出的模块，我们可以利用大括号办法导出模块
// 对付模块a.js或b.js，我们利用大括号办法导出模块 // e.js import { name, age, add } from './b.js' console.log(name, age); // 掌握台输出'Jack'和18 console.log(add(1, 8)); // 掌握台输出9
除了利用import … from '…'办法导入模块，也可以利用import '…'。利用这种办法，导入模块后会实行模块内容，但是并不该用其对外供应的接口。
3.import()函数把稳import()函数与上面的import模块导入语法的差异。
import()函数是ES2020提案里提出来的。它与普通的import模块导入语法的差异，外不雅观上是它的import后面跟的是一个括号()，而普通的import末了是一个引号''。
import()函数虽然是ES2020提案里的，但Webpack早已经支持该模块导入语法了。
// import()函数导入模块import('./f.js')
除了外不雅观上的差异，import()与引号形式import的核心差异是，import()可以动态导入模块。
在Vue-Router的路由
大略阐明一下import()的事理。Webpack在打包的时候，碰到import()引入的模块的时候并不会急速把该模块内容打包到当前文件里。Webpack会利用动态天生JS的办法，在运行代码的时候天生script标签，script标签引入的便是import()里导入的内容。import()导入模块后是一个Promise工具，我们可以通过import().then()的办法来处理后续异步的事情。
三、CommonJSCommonJS是目前比较盛行的JS模块化规范，它紧张在Node.js中利用。Node.js对CommonJS的实现并不完备与其规范同等，教程不会涉及这些细微差别。
CommonJS紧张利用module.exports导出模块，require('…')导入模块。
// g.js module.exports = { name: 'Gola', age: 25} // h.js var person = require('./g.js') console.log(person) // 输出{name: 'Gola',age: 25}
Webpack对CommonJS也支持动态模块。如果你用过旧版本的Webpack，可以创造require.ensure导入模块的语法。把稳该语法是Webpack特有的，现在推举利用import()函数做动态导入模块。
// dependencies是一个数组，数组项是须要导入的模块;callback是成功回调函数；errorCallback是失落败回调函数；chunkName是自定义的chunk名； require.ensure(dependencies, callback, errorCallback, chunkName)小结Webpack支持ES6 Module、CommonJS和AMD等模块化方法，目前常用的是ES6 Module和CommonJS。ES6 Module通过export导出模块，import … from '…'或import '…'导入模块。CommonJS通过module.exports导出模块，require('…')导入模块。ES6 Module通过import()函数动态导入模块，CommonJS通过require.ensure动态导入模块，现在推举利用import()函数动态导入模块。
原文地址：模块化import与require及差异 - Webpack教程 - 姜瑞涛的官方网站
