官网链接：https://webpack.js.org/concepts/module-resolution/

在模块化编程中，开发者将程序分解成称为 module 的离散功能 chunks

每个模块相对于一个完整的程序有更小的接触面
Node.js 从一开始就支持模块化编程
在 Web 中，有很多支持模块的工具，Webpack 从中学习到很多并应用

一、何为 Webpack 模块

与 Node.js 相比，webpack 模块有多种表达方式，下面是一些例子

  • ES2015 的 import 语句
  • CommonJS 的 require() 语句
  • AMD 的 define 和 require 语句
  • 在 css/sass/less 文件中的 @import 语句
  • stylesheet 中 image 的 url(..) 或 HTML 中 <img src=...> 文件

二、支持的模块类型

  • ECMAScript modules
  • CommonJS modules
  • AMD modules
  • Assets
  • WebAssembly modules

通过 loader，webpack 支持多种使用各种语言和预处理器写的模块
Loaders 向 webpack 描述了怎样处理非原生模块和将这些依赖添加到 bundles
webpack 社区已经为各种流行的语言和语言处理器创建了很多 loaders，包括

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

还有很多其他的没列举完。总的来说，Webpack 提供了可定制、丰富的 API 让我们在任何技术栈中使用 webpack，同时支持在开发、测试、生产工作流中保持无侵入性。

「@浪里淘沙的小法师」