Modules

在模块化编程中，开发者将不相关的代码按照功能拆分，拆分后的代码叫做module
每个module都会提供独立的功能，比如做验证，debugging等，良好设计的module一般也会抽象的比较好，为整体应用提供相关功能而不侵入到业务代码。
Node.js从创立之初就支持模块化编程。在web领域，模块化编程也在慢慢崛起。
web领域很多工具都都在支持模块化编程，webpack在吸收其他工具的基础上，构建了一套自己的模块化工具。

What is webpack Module

对比Node.js modules,webpack modules支持多种方式实现模块化。
一些例子如下：

ES2015 import的方式。
CommonJS require()的方式
AMD define 及 require的方式
在css/sass/less文件中 @import statement的方式
样式表中以url url(...)使用图片或html文件中以使用图片

webpack 1需要特殊的loader来支持ES2015 import，而webpack2中不需要任何配置就可以使用该中方式。

Supported Module Types

webpack通过loaders支持很多种的语言，loader会将非js module添加到依赖bundle中。
webpack通过loader支持大部分的语言。

CoffeScript
TypeScript
ESNext(Babel)
Sass
Less
Stylus
webpack不会限制使用何种工作流。

Module配置

文档地址

module.noParse(RegExp| [RegExp])
指定webpack不出解析表达式匹配的文件。被忽略的文件不应该通过import,require,define或其他方式被调用。
通过这样设置，忽略对大文件的处理后，可以提升构建速度。

noParse: /jquery|lodash/

module.rules(array)
定义的规则会匹配module的创建。定义的规则可以设置module如何被创建，可以让module接收loader或修改默认的parser。

Rule

规则定义可以分为三部分,Conditions(条件),Results(结果),嵌套的规则。

Rule conditions

规则的条件包括两类:

请求的资源：请求的文件的绝对路径，通过resolve rules进行配置。
资源请求者：请求使用资源的文件的绝对路径，对请求资源使用使用import的位置。

举例：
在app.js中引入css，import "./style.css".
请求的资源为/path/to/style.css.
资源请求者为/path/to/app.js.
规则定义中，test,include,exclude,resource属性需要匹配请求的资源。
issuer需要匹配资源请求者。

当设置多个条件时，需要匹配所有设置的条件。

Rule results

Rule results只在Rule condition匹配的时候起作用。
Rule中的值包括两个输出值。

使用的loader:匹配到resource上的一系列loader
parser参数:module解析需要使用的配置。
这些配置会影响loaders:loader,options,use.
为了保证兼容性也支持:query.loaders

enforce配置会影响loader的分组，无论是normal,pre-loader或post-loader
parser属性会影响parser配置。

nested rules

嵌套规则可以通过rules和oneOf来配置。
在Rule condition匹配的情况下，会起作用。

Rule.enforce
参数可能为pre或post
制定loader的分类，不对该参数做配置时表示使用normal loader。
另外支持一种inlined loader,适用于内联的import/require。
loaders按照post,inline,normal,pre顺序执行。
normal类型的loader使用!前缀
normal和pre类型的loader使用-!前缀
normal``post,pre类型的loader使用!!前缀
inline loaders及!都是非独立loader，只能被loader生成的代码使用。
Rule.exclude
Rule.exclude是Rule.resource.exclude的简写。
具体详情参考Rule.resource和Condition.exclude。
Rule.include
Rule.include是Rule.resource.include的简写。
具体详情参考Rule.resource和Condition.include
Rule.issure
通过issuer匹配的Condition,详情参考Rule conditions
Rule.loader
Rule.loader是Rule.use: [ { loader} ]的缩写。
详情参考Rule.use和UseEntry.loader.
Rule.loaders
Rule.loaders是Rule.use的映射.
该配置是为了兼容的原因才存在的。应该对Rule.use进行配置，来代替对该属性的配置。
详情参考Rule.use
Rule.oneOf
在一系列的Rules中进行匹配
Rule.options / Rule.query
Rule.options及Rule.query是Rule.use: [ { options} ]的简写.
详情参考Rule.use及UseEntry.options.
Rule.query仅仅为了兼容老的，使用Rule.options来替代该配置。
Rule.parser
parser的配置参数。
An object with parser options. All applied parser options are merged.

For each different parser options object a new parser is created and plugins can apply plugins depending on the parser options. Many of the default plugins apply their parser plugins only if a property in the parser options is not set or true.

//默认plugin的parser配置项
parser: {
  amd: false, // disable AMD
  commonjs: false, // disable CommonJS
  system: false, // disable SystemJS
  harmony: false, // disable ES2015 Harmony import/export
  requireInclude: false, // disable require.include
  requireEnsure: false, // disable require.ensure
  requireContext: false, // disable require.context
  browserify: false, // disable special handling of Browserify bundles
  requireJs: false, // disable requirejs.*
  node: false, // disable __dirname, __filename, module, require.extensions, require.main, etc.
  node: {...} // reconfigure node layer on module level
}

Rule.resource
Rule.rules
Rule.test
Rule.text是Rule.resource.test的缩写，
详情查看Rule.resource和Condition.test
Rule.use

Condition

Conditions支持下面几种

string:同提供的string匹配。ie:文件夹绝对路径或文件绝对路径
RegExp:同提供的正则表达式进行匹配
Function:函数使用传入的值进行匹配，匹配成功返回true
数组condition:至少需要匹配数组中的一个condition
object:需要匹配所有属性，每个属性都有默认值。

{ test: Codition }:必须要匹配Condition，该配置约定使用RegExp或RegExps数组。但是该配置不强制要求。

UseEntry(object)

必须要有一个string类型的值处理的loader。使用resolveLoader来解决loader的查找。
可以使用options参数来做配置，配置的内容会传递给loader。

{
  loader: "css-loader",
  options: {
    modules: true
  }
}

Webpack Modules