webpack新版本4.12应用九(配置文件之模块(module))
这些选项决定了如何处理项目中的不同类型的模块。
module.noParse
RegExp | [RegExp]
RegExp | [RegExp] | function
(从 webpack 3.0.0 开始)
防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import
, require
,define
的调用,或任何其他导入机制。忽略大型的 library 可以提高构建性能。
noParse: /jquery|lodash/ // 从 webpack 3.0.0 开始
noParse: function(content) {
return /jquery|lodash/.test(content);
}
module.rules
array
创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。
Rule
每个规则可以分为三部分 - 条件(condition),结果(result)和嵌套规则(nested rule)。
Rule 条件
条件有两种输入值:
resource:请求文件的绝对路径。它已经根据
resolve
规则解析。issuer: 被请求资源(requested the resource)的模块文件的绝对路径。是导入时的位置。
例如: 从 app.js
导入 './style.css'
,resource 是 /path/to/style.css
. issuer 是 /path/to/app.js
。
在规则中,属性 test
, include
, exclude
和 resource
对 resource 匹配,并且属性 issuer
对 issuer 匹配。
当使用多个条件时,所有条件都匹配。
小心!resource 是文件的_解析路径,这意味着符号链接的资源是真正的路径,而不是_符号链接位置。在使用工具来符号链接包的时候(如npm link
)比较好记,像/node_modules/
等常见条件可能会不小心错过符号链接的文件。注意,可以通过resolve.symlinks
关闭符号链接解析(以便将资源解析为符号链接路径)。
Rule 结果
规则结果只在规则条件匹配时使用。
规则有两种输入值:
- 应用的 loader:应用在 resource 上的 loader 数组。
- Parser 选项:用于为模块创建解析器的选项对象。
这些属性会影响 loader:loader
, options
, use
。
enforce
属性会影响 loader 种类。不论是普通的,前置的,后置的 loader。
parser
属性会影响 parser 选项。
嵌套的 Rule
这些规则用于在规则条件(rule condition)匹配时进行取值。
Rule.enforce
可能的值有:"pre" | "post"
指定 loader 种类。没有值表示是普通 loader。
还有一个额外的种类"行内 loader",loader 被应用在 import/require 行内。
所有 loader 通过 前置, 行内, 普通, 后置
排序,并按此顺序使用。
所有普通 loader 可以通过在请求中加上 !
前缀来忽略(覆盖)。
所有普通和前置 loader 可以通过在请求中加上 -!
前缀来忽略(覆盖)。
所有普通,后置和前置 loader 可以通过在请求中加上 !!
前缀来忽略(覆盖)。
不应该使用行内 loader 和 !
前缀,因为它们是非标准的。它们可在由 loader 生成的代码中使用。
Rule.exclude
Rule.exclude
是 Rule.resource.exclude
的简写。如果你提供了 Rule.exclude
选项,就不能再提供Rule.resource
。详细请查看 Rule.resource
和 Condition.exclude
。
Rule.include
Rule.include
是 Rule.resource.include
的简写。如果你提供了 Rule.include
选项,就不能再提供Rule.resource
。详细请查看 Rule.resource
和 Condition.include
。
Rule.issuer
一个条件
,用来与被发布的 request 对应的模块项匹配。在以下示例中,a.js request 的发布者(issuer)
是 index.js 文件的路径。
index.js
import A from './a.js'
这个选项可以用来将 loader 应用到一个特定模块或一组模块的依赖中。
Rule.loader
Rule.loader
是 Rule.use: [ { loader } ]
的简写。详细请查看 Rule.use
和 UseEntry.loader
。
Rule.loaders
由于需要支持Rule.use
,此选项已废弃。
Rule.loaders
是 Rule.use
的别名。详细请查看 Rule.use
。
Rule.oneOf
规则
数组,当规则匹配时,只使用第一个匹配规则。
{
test: /.css$/,
oneOf: [
{
resourceQuery: /inline/, // foo.css?inline
use: 'url-loader'
},
{
resourceQuery: /external/, // foo.css?external
use: 'file-loader'
}
]
}
Rule.options / Rule.query
Rule.options
和 Rule.query
是 Rule.use: [ { options } ]
的简写。详细请查看 Rule.use
和UseEntry.options
。
由于需要支持Rule.options
和UseEntry.options
,Rule.use
,Rule.query
已废弃。
Rule.parser
解析选项对象。所有应用的解析选项都将合并。
解析器(parser)可以查阅这些选项,并相应地禁用或重新配置。大多数默认插件,会如下解释值:
- 将选项设置为
false
,将禁用解析器。 - 将选项设置为
true
,或不修改将其保留为undefined
,可以启用解析器。
然而,一些解析器(parser)插件可能不光只接收一个布尔值。例如,内部的 NodeStuffPlugin
差距,可以接收一个对象,而不是 true
,来为特定的规则添加额外的选项。
示例(默认的插件解析器选项):
parser: {
amd: false, // 禁用 AMD
commonjs: false, // 禁用 CommonJS
system: false, // 禁用 SystemJS
harmony: false, // 禁用 ES2015 Harmony import/export
requireInclude: false, // 禁用 require.include
requireEnsure: false, // 禁用 require.ensure
requireContext: false, // 禁用 require.context
browserify: false, // 禁用特殊处理的 browserify bundle
requireJs: false, // 禁用 requirejs.*
node: false, // 禁用 __dirname, __filename, module, require.extensions, require.main 等。
node: {...} // 在模块级别(module level)上重新配置 node 层(layer)
}
Rule.resource
条件
会匹配 resource。既可以提供 Rule.resource
选项,也可以使用快捷选项 Rule.test
,Rule.exclude
和 Rule.include
。在 Rule
条件 中查看详细。
Rule.resourceQuery
A Condition
matched with the resource query. This option is used to test against the query section of a request string (i.e. from the question mark onwards). If you were to import Foo from './foo.css?inline'
, the following condition would match:
{
test: /.css$/,
resourceQuery: /inline/,
use: 'url-loader'
}
Rule.rules
规则
数组,当规则匹配时使用。
Rule.test
Rule.test
是 Rule.resource.test
的简写。如果你提供了一个 Rule.test
选项,就不能再提供Rule.resource
。详细请查看 Rule.resource
和 Condition.test
。
Rule.use
应用于模块的 UseEntries 列表。每个入口(entry)指定使用一个 loader。
传递字符串(如:use: [ "style-loader" ]
)是 loader 属性的简写方式(如:use: [ { loader: "style-loader "} ]
)。
Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured).
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'less-loader',
options: {
noIeCompat: true
}
}
]
详细请查看 UseEntry。
条件
条件可以是这些之一:
- 字符串:匹配输入必须以提供的字符串开始。是的。目录绝对路径或文件绝对路径。
- 正则表达式:test 输入值。
- 函数:调用输入的函数,必须返回一个真值(truthy value)以匹配。
- 条件数组:至少一个匹配条件。
- 对象:匹配所有属性。每个属性都有一个定义行为。
{ test: Condition }
:匹配特定条件。一般是提供一个正则表达式或正则表达式的数组,但这不是强制的。
{ include: Condition }
:匹配特定条件。一般是提供一个字符串或者字符串数组,但这不是强制的。
{ exclude: Condition }
:排除特定条件。一般是提供一个字符串或字符串数组,但这不是强制的。
{ and: [Condition] }
:必须匹配数组中的所有条件
{ or: [Condition] }
:匹配数组中任何一个条件
{ not: [Condition] }
:必须排除这个条件
示例:
{
test: /\.css$/,
include: [
path.resolve(__dirname, "app/styles"),
path.resolve(__dirname, "vendor/styles")
]
}
UseEntry
object
必须有一个 loader
属性是字符串。它使用 loader 解析选项(resolveLoader),相对于配置中的 context
来解析。
可以有一个 options
属性为字符串或对象。值可以传递到 loader 中,将其理解为 loader 选项。
由于兼容性原因,也可能有 query
属性,它是 options
属性的别名。使用 options
属性替代。
Example:
{
loader: "css-loader",
options: {
modules: true
}
}
注意,webpack 需要生成资源和所有 loader 的独立模块标识,包括选项。它尝试对选项对象使用JSON.stringify
。这在 99.9% 的情况下是可以的,但是如果将相同的 loader 应用于相同资源的不同选项,并且选项具有一些带字符的值,则可能不是唯一的。
如果选项对象不被字符化(例如循环 JSON),它也会中断。因此,你可以在选项对象使用 ident
属性,作为唯一标识符。
模块上下文
Avoid using these options as they are deprecated and will soon be removed. 避免使用这些选项,因为它们已废弃,并将很快删除。
这些选项描述了当遇到动态依赖时,创建上下文的默认设置。
例如,未知的(unknown)
动态依赖:require
。
例如,表达式(expr)
动态依赖:require(expr)
。
例如,包裹的(wrapped)
动态依赖:require("./templates/" + expr)
。
以下是其默认值的可用选项
module: {
exprContextCritical: true,
exprContextRecursive: true,
exprContextRegExp: false,
exprContextRequest: ".",
unknownContextCritical: true,
unknownContextRecursive: true,
unknownContextRegExp: false,
unknownContextRequest: ".",
wrappedContextCritical: false
wrappedContextRecursive: true,
wrappedContextRegExp: /.*/,
strictExportPresence: false // since webpack 2.3.0
}
你可以使用ContextReplacementPlugin
来修改这些单个依赖的值。这也会删除警告。
几个用例:
- 动态依赖的警告:
wrappedContextCritical: true
。 require(expr)
应该包含整个目录:exprContextRegExp: /^\.\//
require("./templates/" + expr)
不应该包含默认子目录:wrappedContextRecursive: false
strictExportPresence
makes missing exports an error instead of warning
webpack新版本4.12应用九(配置文件之模块(module))的更多相关文章
- webpack新版本4.12应用九(配置文件之使用不同语言进行配置)
使用不同语言进行配置(configuration languages) 查看原文|编辑此页 webpack 接受以多种编程和数据语言编写的配置文件.支持的文件扩展名列表,可以在 node-interp ...
- webpack新版本4.12应用九(配置文件之输出(output))
output 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出.以及在哪里输出你的「bundle.asset 和其他你所打包或使用 webpack 载入的任何内容」. ou ...
- webpack新版本4.12应用九(配置文件之多种配置类型)
除了导出单个配置对象,还有一些方式满足其他需求. 导出为一个函数 最终,你会发现需要在开发和生产构建之间,消除 webpack.config.js 的差异.(至少)有两种选项: 作为导出一个配置对象的 ...
- webpack新版本4.12应用九(配置文件之入口和上下文(entry and context))
entry 对象是用于 webpack 查找启动并构建 bundle.其上下文是入口文件所处的目录的绝对路径的字符串. context string 基础目录,绝对路径,用于从配置中解析入口起点(en ...
- webpack新版本4.12应用九(配置文件之configuration)
配置 查看原文|编辑此页 webpack 是需要传入一个配置对象(configuration object).取决于你如何使用 webpack,可以通过两种方式之一:终端或 Node.js.下面指定了 ...
- 关于centos7和centos6中平滑升级nginx到新版本v1.12.1修复nginx最新漏洞CVE-2017-7529的解决方案
关于centos7和centos6中平滑升级nginx到新版本v1.12.1修复CVE-2017-7529漏洞的解决方案 漏洞描述 2017年7月11日,Nginx官方发布最新的安全公告,在Nginx ...
- webpack项目调试以及独立打包配置文件
webpack项目调试 -sourcemap webpack配置提供了devtool这个选项,如果设置为 ‘#source-map’,则可以生成.map文件,在chrome浏览器中调试的时候可以显示源 ...
- 前端笔记之ES678&Webpack&Babel(下)AMD|CMD规范&模块&webpack&Promise对象&Generator函数
一.AMD和CMD规范(了解) 1.1传统的前端开发多个js文件的关系 yuan.js中定义了一个函数 function mianji(r){ return 3.14 * r * r } main.j ...
- 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十九:SDRAM模块② — 多字读写
实验十九:SDRAM模块② — 多字读写 表示19.1 Mode Register的内容. Mode Register A12 A11 A10 A9 A8 A7 A6 A5 A4 A3 A2 A1 A ...
随机推荐
- 黑苹果Yosemite 10.10.1懒人版完美安装及简单驱动设置
1.硬件概要 CPU: 英特尔 Xeon E3-1230 V2 (四核)主板: 技嘉 H77-DS3H (Intel H77 (Panther Point Base))内存: 8 GBytes显卡: ...
- Eclipse调试C++(Cocos2dx Android )
原文链接: http://www.cnblogs.com/zouzf/p/4202537.html 先说windows下的,mac下的在最后 环境:win8.1.java 1.5.Eclipse 4. ...
- Linux系统下chkconfig命令使用详解
chkconfig命令可以用来检查.设置系统的各种服务 使用语法:chkconfig [--add][--del][--list][系统服务] 或 chkconfig [--level <等级代 ...
- python部署LNMP业务服务环境
- java基础(5)--流程控制结构
流程控制结构 if结构 当关系表达式为true时,执行语句 if(关系表达式){ //语句块 } if-else结构 当关系表达式为true时,执行语句块1,否则执行语句块2 if(关系表达式){ / ...
- Django之ModelForm详解
前言 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来.先来一个简单的例子来看一下这个东西怎么用: 比如我们的数据库中有这样一张学生表,字段有姓名,年龄,爱 ...
- linux service start|stop|restart
用了这么些日子的linux/unix系统,也和别人一起合作开发了不少程序,发现高手都喜欢在命令行上操作,而且控制程序的运行偏好于使用脚本,加上参数如:start.restart.stop等. 后来自己 ...
- Tomcat出现java.lang.Exception: Socket bind failed
今天测试系统,Tomcat(apache-tomcat-6.0.20windows版)突然出现异常,导致JSP页面无法运行.错误提示如下:2014-3-12 17:13:29 org.apache.c ...
- U盘安装XP
ZC: 第1阶段结束 进入第2阶段 的时候,还是需要手动选择USB启动 (如果没有修改BIOS为USB启动的话) ZC: 我用的 WinSetupFromUSB,是文章尾部的那个版本的软件界面. ZC ...
- 深度学习框架TensorFlow在Kubernetes上的实践
什么是TensorFlow TensorFlow是谷歌在去年11月份开源出来的深度学习框架.开篇我们提到过AlphaGo,它的开发团队DeepMind已经宣布之后的所有系统都将基于TensorFlow ...