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文件中以<img src=...>使用图片
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
}
}
网友评论