非常教程

Webpack参考手册

概念 | Concepts

单元 | Modules

在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块

每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

Node.js 从最一开始就支持模块化编程。然而,在 web,模块化的支持正缓慢到来。在 web 存在多种支持 JavaScript 模块化的工具,这些工具各有优势和限制。webpack 基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文件。

什么是webpack模块

与Node.js模块相比,webpack 模块 可以用各种方式表达它们的依赖关系。一些例子是:

  • 一个ES2015import语句
  • 一个CommonJS的 require()语句

  • 一个AMD definerequire语句

  • css / sass / less文件中的@import语句。
  • 样式表(url(...))或html(<img src=...>)文件中的图像URL 。

webpack 1需要一个特定的加载器来转换ES2015 import,但是通过webpack 2可以开箱即用

支持的模块类型

webpack 通过 loader 可以支持各种语言和预处理器编写模块。loader 描述了 webpack 如何处理 非 JavaScript(non-JavaScript) 模块,并且在 bundle 中引入这些依赖。 webpack 社区已经为各种流行语言和语言处理器构建了 loader,包括:

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

总的来说,webpack 提供了可定制的、强大和丰富的 API,允许任何技术栈使用 webpack,保持了在你的开发、测试和生成流程中无侵入性(non-opinionated)

有关完整列表,请参阅Loaders列表编写自己的列表

Webpack

webpack 是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。

主页 https://webpack.js.org/
源码 https://github.com/webpack/webpack
发布版本 3.8.1

Webpack目录

1.指南 | Guides
2.接口 | API
3.概念 | Concepts
4.组态 | Configuration
5.装载 | Loaders