Webpack 杂谈帮助文档翻译：Webpack的模块

Posted 2020-10-27 秋意正寒

Webpack眼中的模块是什么

页面出自Webpack官方文档（撰写时，是v4.1.1）

其实Webpack本身有中文文档，不知道是谁去撰写的，但是自己翻译一遍感觉更好理解。

https://webpack.js.org/concepts/modules/

 

模块

在模块化编程中，开发者将单独功能的代码分装成模块。

每个模块体积都会比一大坨程序的体积小，使得调试和编写变得方便。

NodeJs自创建以来就支持了模块化编程，但是在Web编程中，模块化一直很迟钝（没被支持），当然也有很多为了模块化而出现的Js模块化工具，它们各有优缺点。

Webpack去粗取精，继承它们优秀的地方，使得模块化适合Web项目中的任何文件。

什么是Webpack模块

和NodeJs单一化的表达方式不同，Webpack可以用多种方式来完成、实现模块化的编程：

• ES6的 import 表达
• CommonJS的 require() 表达
• AMD（异步模块定义）的 define 和 require 表达
• CSS/SASS/LESS文件中的 @import 表达
• 样式表或html文件中的图像url地址（不明？）

Webpack 1代需要特定的加载器完成ES6的 import 表达，但是Webpack 2代就原生支持了。

支持的模块类型

Webpack支持用加载器来加载各种不同类型的模块，加载器会告诉Webpack这些模块是什么（因为不是javascript模块了呀），然后会打包在一起。

支持的类型包括：

• CoffeeScript
• TypeScript
• ESNext(Babel)
• Sass
• Less
• Stylus

等等。Webpack支持很多种Web编程的模块化打包使得开发者更容易进行Web开发。

加载器的全部列表如下：点我