diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md index 0c13e4941964..455e1df98001 100644 --- a/src/content/api/loaders.md +++ b/src/content/api/loaders.md @@ -14,20 +14,20 @@ contributors: - snitin315 --- -A loader is just a JavaScript module that exports a function. The [loader runner](https://github.com/webpack/loader-runner) calls this function and passes the result of the previous loader or the resource file into it. The `this` context of the function is filled-in by webpack and the [loader runner](https://github.com/webpack/loader-runner) with some useful methods that allow the loader (among other things) to change its invocation style to async, or get query parameters. +loader 只是一个导出为函数的 JavaScript 模块。[loader runner](https://github.com/webpack/loader-runner) 会调用这个函数,然后把上一个 loader 产生的结果或者资源文件(resource file)传入进去。函数的 this 上下文将由 webpack 填充,并且 [loader runner](https://github.com/webpack/loader-runner) 具有一些有用方法,可以使 loader 改变为异步调用方式,或者获取 query 参数。 -The first loader is passed one argument: the content of the resource file. The compiler expects a result from the last loader. The result should be a `String` or a `Buffer` (which is converted to a string), representing the JavaScript source code of the module. An optional SourceMap result (as a JSON object) may also be passed. +第一个 loader 只有一个传入参数:资源文件(resource file)的内容。compiler 预期得到最后一个 loader 产生的处理结果。这个处理结果应该是 String 或者 Buffer(能够被转换为一个 string),代表了模块的 JavaScript 源码。另外,还可以传递一个可选的 SourceMap 结果(格式为 JSON 对象)。 -A single result can be returned in __sync mode__. For multiple results the `this.callback()` must be called. In __async mode__ `this.async()` must be called to indicate that the [loader runner](https://github.com/webpack/loader-runner) should wait for an asynchronous result. It returns `this.callback()`. Then the loader must return `undefined` and call that callback. +如果是单个处理结果,可以在__同步模式__中直接返回。如果有多个处理结果,则必须调用 this.callback()。在__异步模式__中,必须调用 this.async(),来指示 [loader runner](https://github.com/webpack/loader-runner) 等待异步结果,它会返回 this.callback() 回调函数,随后 loader 必须返回 undefined 并且调用该回调函数。 -## Examples +## 示例 -The following sections provide some basic examples of the different types of loaders. Note that the `map` and `meta` parameters are optional, see [`this.callback`](#thiscallback) below. +以下部分提供了不同类型的 loader 的一些基本示例。注意,map 和 meta 参数是可选的,查看下面的 this.callback。 -### Synchronous Loaders +### 同步 Loaders -Either `return` or `this.callback` can be used to return the transformed `content` synchronously: +无论是 return 还是 this.callback 都可以同步地返回转换后的 content 内容: __sync-loader.js__ @@ -37,20 +37,21 @@ module.exports = function(content, map, meta) { }; ``` -The `this.callback` method is more flexible as it allows multiple arguments to be passed as opposed to just the `content`. +this.callback 方法则更灵活,因为它允许传递多个参数,而不仅仅是content。 __sync-loader-with-multiple-results.js__ ``` javascript module.exports = function(content, map, meta) { this.callback(null, someSyncOperation(content), map, meta); - return; // always return undefined when calling callback() + return; // 当调用 callback() 函数时,总是返回 undefined }; ``` ### Asynchronous Loaders +### 异步 Loaders -For asynchronous loaders, [`this.async`](#thisasync) is used to retrieve the `callback` function: +对于异步 loader,使用 [`this.async`](#thisasync) 来获取 callback 函数: __async-loader.js__ @@ -76,12 +77,11 @@ module.exports = function(content, map, meta) { }; ``` -T> Loaders were originally designed to work in synchronous loader pipelines, like Node.js (using [enhanced-require](https://github.com/webpack/enhanced-require)), _and_ asynchronous pipelines, like in webpack. However, since expensive synchronous computations are a bad idea in a single-threaded environment like Node.js, we advise making your loader asynchronous if possible. Synchronous loaders are ok if the amount of computation is trivial. - +T> loader 最初被设计为可以在同步 loader pipline(如 Node.js ,使用 [enhanced-require](https://github.com/webpack/enhanced-require)),_以及_在异步 pipeline(如 webpack )中运行。然而在 Node.js 这样的单线程环境下进行耗时长的同步计算不是个好想法,我们建议尽可能地使你的 loader 异步化。但如果计算量很小,同步 loader 也是可以的。 ### "Raw" Loader -By default, the resource file is converted to a UTF-8 string and passed to the loader. By setting the `raw` flag to `true`, the loader will receive the raw `Buffer`. Every loader is allowed to deliver its result as a `String` or as a `Buffer`. The compiler converts them between loaders. +默认情况下,资源文件会被转化为 UTF-8 字符串,然后传给 loader。通过设置 raw 为 true,loader 可以接收原始的 Buffer。每一个 loader 都可以用 String 或者 Buffer 的形式传递它的处理结果。Complier 将会把它们在 loader 之间相互转换。 __raw-loader.js__ @@ -89,20 +89,20 @@ __raw-loader.js__ module.exports = function(content) { assert(content instanceof Buffer); return someSyncOperation(content); - // return value can be a `Buffer` too - // This is also allowed if loader is not "raw" + // 返回值也可以是一个 `Buffer` + // 即使不是 raw loader 也没问题 }; module.exports.raw = true; ``` - ### Pitching Loader -Loaders are __always__ called from right to left. There are some instances where the loader only cares about the __metadata__ behind a request and can ignore the results of the previous loader. The `pitch` method on loaders is called from __left to right__ before the loaders are actually executed (from right to left). +loader 总是__从右到左地被调用。有些情况下,loader 只关心 request 后面的__元数据(metadata),并且忽略前一个 loader 的结果。在实际(从右到左)执行 loader 之前,会先__从左到右__调用 loader 上的 pitch 方法。 -T> Loaders may be added inline in requests and disabled via inline prefixes, which will impact the order in which they are "pitched" and executed. See [`Rule.enforce`](/configuration/module/#ruleenforce) for more details. +module.exports = { +T> Loaders 可以通过 request 添加或者内联前缀禁用,这将影响到 pitch 和 执行的顺序。更多详情查看[`Rule.enforce`](/configuration/module/#ruleenforce) -For the following configuration of [`use`](/configuration/module/#ruleuse): +对于以下 [`use`](/configuration/module/#ruleuse) 配置: ``` javascript module.exports = { @@ -122,7 +122,7 @@ module.exports = { }; ``` -These steps would occur: +将会发生这些步骤: ``` diff |- a-loader `pitch` @@ -134,9 +134,9 @@ These steps would occur: |- a-loader normal execution ``` -So why might a loader take advantage of the "pitching" phase? +那么,为什么 loader 可以利用 "跳跃(pitching)" 阶段呢? -First, the `data` passed to the `pitch` method is exposed in the execution phase as well under `this.data` and could be useful for capturing and sharing information from earlier in the cycle. +首先,传递给 pitch 方法的 data,在执行阶段也会暴露在 this.data 之下,并且可以用于在循环时,捕获和共享前面的信息。 ``` javascript module.exports = function(content) { @@ -148,7 +148,7 @@ module.exports.pitch = function(remainingRequest, precedingRequest, data) { }; ``` -Second, if a loader delivers a result in the `pitch` method, the process turns around and skips the remaining loaders. In our example above, if the `b-loader`s `pitch` method returned something: +其次,如果某个 loader 在 pitch 方法中给出一个结果,那么这个过程会回过身来,并跳过剩下的 loader。在我们上面的例子中,如果 b-loader 的 pitch 方法返回了一些东西: ``` javascript module.exports = function(content) { @@ -162,7 +162,7 @@ module.exports.pitch = function(remainingRequest, precedingRequest, data) { }; ``` -The steps above would be shortened to: +上面的步骤将被缩短为: ``` diff |- a-loader `pitch` @@ -170,14 +170,14 @@ The steps above would be shortened to: |- a-loader normal execution ``` -See the [bundle-loader](https://github.com/webpack-contrib/bundle-loader) for a good example of how this process can be used in a more meaningful way. +查看 [bundle-loader](https://github.com/webpack-contrib/bundle-loader) 了解如何以更有意义的方式使用此过程。 ## The Loader Context -The loader context represents the properties that are available inside of a loader assigned to the `this` property. +loader context 表示在 loader 内使用 this 可以访问的一些方法或属性。 -Given the following example, this require call is used: +下面提供一个例子,将使用 require 进行调用: In `/abc/file.js`: @@ -188,44 +188,37 @@ require('./loader1?xyz!loader2!./resource?rrr'); ### `this.version` -__Loader API version.__ Currently `2`. This is useful for providing backwards compatibility. Using the version you can specify custom logic or fallbacks for breaking changes. - +__loader API 的版本号__ 目前是 2。这对于向后兼容性有一些用处。通过这个版本号,你可以自定义逻辑或者降级处理。 ### `this.context` -__The directory of the module.__ Can be used as a context for resolving other stuff. - -In the example: `/abc` because `resource.js` is in this directory +__模块所在的目录__ 可以用作解析其他模块成员的上下文。 +在我们的例子中:因为 resource.js 在这个目录中,这个属性为 /abc ### `this.rootContext` -Since webpack 4, the formerly `this.options.context` is provided as `this.rootContext`. - +从 webpack 4 开始,原先的 this.options.context 被改进为 this.rootContext。 ### `this.request` -The resolved request string. - -In the example: `'/abc/loader1.js?xyz!/abc/node_modules/loader2/index.js!/abc/resource.js?rrr'` +被解析出来的 request 字符串。 +在我们的例子中:"/abc/loader1.js?xyz!/abc/node_modules/loader2/index.js!/abc/resource.js?rrr" ### `this.query` -1. If the loader was configured with an [`options`](/configuration/module/#useentry) object, this will point to that object. -2. If the loader has no `options`, but was invoked with a query string, this will be a string starting with `?`. - +1. 如果这个 loader 配置了 [`options`](/configuration/module/#useentry) 对象的话,this.query 就指向这个 option 对象。 +2. 如果 loader 中没有 options,而是以 query 字符串作为参数调用时,this.query 就是一个以 ? 开头的字符串。 ### `this.getOptions(schema)` -Extracts given loader options. Optionally, accepts JSON schema as an argument. - -T> Since webpack 5, `this.getOptions` is available in loader context. It substitutes `getOptions` method from [loader-utils](https://github.com/webpack/loader-utils#getoptions). - +提取给定的 loader 选项,接受一个可选的 JSON 格式化对象作为参数 +T> 从 webpack 5开始, this.getOptions 可以获取到 loader 上下文对象。 它用来替代来自 loader-utils 的 getOptions 方法。 ### `this.callback` -A function that can be called synchronously or asynchronously in order to return multiple results. The expected arguments are: +一个可以同步或者异步调用的可以返回多个结果的函数。预期的参数是: @@ -238,42 +231,40 @@ this.callback( ); ``` -1. The first argument must be an `Error` or `null` -2. The second argument is a `string` or a [`Buffer`](https://nodejs.org/api/buffer.html). -3. Optional: The third argument must be a source map that is parsable by [this module](https://github.com/mozilla/source-map). -4. Optional: The fourth option, ignored by webpack, can be anything (e.g. some metadata). +1. 第一个参数必须是 Error 或者 null +2. 第二个参数是一个 string 或者 [`Buffer`](https://nodejs.org/api/buffer.html)。 +3. 可选的:第三个参数必须是一个可以被 [this module](https://github.com/mozilla/source-map) 解析的 source map。 +4. 可选的:第四个选项,会被 webpack 忽略,可以是任何东西(例如一些元数据)。 -T> It can be useful to pass an abstract syntax tree (AST), like [`ESTree`](https://github.com/estree/estree), as the fourth argument (`meta`) to speed up the build time if you want to share common ASTs between loaders. +T> 如果希望在加载程序之间共享公共的AST,可以将抽象语法树AST(例如 [`ESTree`](https://github.com/estree/estree))作为第四个参数(`meta`)传递,以加快构建时间。 -In case this function is called, you should return undefined to avoid ambiguous loader results. +如果这个函数被调用的话,你应该返回 undefined 从而避免含糊的 loader 结果。 ### `this.async` -Tells the [loader-runner](https://github.com/webpack/loader-runner) that the loader intends to call back asynchronously. Returns `this.callback`. - +告诉 [loader-runner](https://github.com/webpack/loader-runner) 这个 loader 将会异步地回调。返回 this.callback。 ### `this.data` -A data object shared between the pitch and the normal phase. - +在 pitch 阶段和 normal 阶段之间共享的 data 对象。 ### `this.cacheable` -A function that sets the cacheable flag: +设置是否可缓存标志的函数: ``` typescript cacheable(flag = true: boolean) ``` -By default, loader results are flagged as cacheable. Call this method passing `false` to make the loader's result not cacheable. +默认情况下,loader 的处理结果会被标记为可缓存。调用这个方法然后传入 false,可以关闭 loader 处理结果的缓存能力。 -A cacheable loader must have a deterministic result when inputs and dependencies haven't changed. This means the loader shouldn't have dependencies other than those specified with `this.addDependency`. +一个可缓存的 loader 在输入和相关依赖没有变化时,必须返回相同的结果。这意味着 loader 除了 this.addDependency 里指定的以外,不应该有其它任何外部依赖。 ### `this.loaders` -An array of all the loaders. It is writable in the pitch phase. +所有 loader 组成的数组。它在 pitch 阶段的时候是可以写入的。 @@ -282,6 +273,7 @@ loaders = [{request: string, path: string, query: string, module: function}] ``` In the example: +在示例中: ``` javascript [ @@ -303,49 +295,45 @@ In the example: ### `this.loaderIndex` -The index in the loaders array of the current loader. +当前 loader 在 loader 数组中的索引。 -In the example: in loader1: `0`, in loader2: `1` +在示例中:loader1 中得到:0,loader2 中得到:1 ### `this.resource` -The resource part of the request, including query. +request 中的资源部分,包括 query 参数。 -In the example: `'/abc/resource.js?rrr'` +在示例中:"/abc/resource.js?rrr" ### `this.resourcePath` -The resource file. - -In the example: `'/abc/resource.js'` +资源文件的路径。 +在示例中:"/abc/resource.js" ### `this.resourceQuery` -The query of the resource. - -In the example: `'?rrr'` +资源的 query 参数。 +在示例中:"?rrr" ### `this.target` -Target of compilation. Passed from configuration options. - -Example values: `'web'`, `'node'` +Compilation 的目标。从配置选项中传递过来的。 +示例:"web", "node" ### `this.webpack` -This boolean is set to true when this is compiled by webpack. - -T> Loaders were originally designed to also work as Babel transforms. Therefore, if you write a loader that works for both, you can use this property to know if there is access to additional loaderContext and webpack features. +如果是由 webpack 编译的,这个布尔值会被设置为 true。 +T> loader 最初被设计为可以同时当 Babel transform 用。如果你编写了一个 loader 可以同时兼容二者,那么可以使用这个属性了解是否存在可用的 loaderContext 和 webpack 特性。 ### `this.sourceMap` -Tells if source map should be generated. Since generating source maps can be an expensive task, you should check if source maps are actually requested. +应该生成一个 source map。因为生成 source map 可能会非常耗时,你应该确认 source map 确实有必要请求。 ### `this.emitWarning` @@ -354,7 +342,7 @@ Tells if source map should be generated. Since generating source maps can be an emitWarning(warning: Error) ``` -Emit a warning that will be displayed in the output like the following: +发出一个警告,在输出中显示如下: ``` bash WARNING in ./src/lib.js (./src/loader.js!./src/lib.js) @@ -363,7 +351,7 @@ Here is a Warning! @ ./src/index.js 1:0-25 ``` -T> Note that the warnings will not be displayed if `stats.warnings` is set to `false`, or some other omit setting is used to `stats` such as `none` or `errors-only`. See the [stats presets configuration](/configuration/stats/#stats-presets). +T> 请注意如果 stats.warnings 设置为 false,警告信息将不会显示。 或者其他一些省略设置被用做 status, 例如,"none"或者 "errors-only"。 ### `this.emitError` @@ -371,7 +359,7 @@ T> Note that the warnings will not be displayed if `stats.warnings` is set to `f emitError(error: Error) ``` -Emit an error that also can be displayed in the output. +发出一个错误,在输出中显示如下: ``` bash ERROR in ./src/lib.js (./src/loader.js!./src/lib.js) @@ -380,8 +368,7 @@ Here is an Error! @ ./src/index.js 1:0-25 ``` -T> Unlike throwing an Error directly, it will NOT interrupt the compilation process of the current module. - +T> 与抛出错误中断运行不同, 它不会中断当前模块的编译过程。 ### `this.loadModule` @@ -389,8 +376,7 @@ T> Unlike throwing an Error directly, it will NOT interrupt the compilation proc loadModule(request: string, callback: function(err, source, sourceMap, module)) ``` -Resolves the given request to a module, applies all configured loaders and calls back with the generated source, the sourceMap and the module instance (usually an instance of [`NormalModule`](https://github.com/webpack/webpack/blob/master/lib/NormalModule.js)). Use this function if you need to know the source code of another module to generate the result. - +解析给定的 request 到一个模块,应用所有配置的 loader ,并且在回调函数中传入生成的 source 、sourceMap 和 模块实例(通常是 [`NormalModule`](https://github.com/webpack/webpack/blob/master/lib/NormalModule.js) 的一个实例)。如果你需要获取其他模块的源代码来生成结果的话,你可以使用这个函数。 ### `this.resolve` @@ -398,7 +384,7 @@ Resolves the given request to a module, applies all configured loaders and calls resolve(context: string, request: string, callback: function(err, result: string)) ``` -Resolve a request like a require expression. +像 require 表达式一样解析一个 request 。 ### `this.addDependency` @@ -408,8 +394,7 @@ addDependency(file: string) dependency(file: string) // shortcut ``` -Add a file as dependency of the loader result in order to make them watchable. For example, [`sass-loader`](https://github.com/webpack-contrib/sass-loader), [`less-loader`](https://github.com/webpack-contrib/less-loader) uses this to recompile whenever any imported `css` file changes. - +加入一个文件作为产生 loader 结果的依赖,使它们的任何变化可以被监听到。例如,[`sass-loader`](https://github.com/webpack-contrib/sass-loader), [`less-loader`](https://github.com/webpack-contrib/less-loader) 就使用了这个技巧,当它发现无论何时导入的css文件发生变化时就会重新编译。 ### `this.addContextDependency` @@ -417,7 +402,7 @@ Add a file as dependency of the loader result in order to make them watchable. F addContextDependency(directory: string) ``` -Add a directory as dependency of the loader result. +添加文件夹作为 loader 结果的依赖。 ### `this.clearDependencies` @@ -426,8 +411,7 @@ Add a directory as dependency of the loader result. clearDependencies() ``` -Remove all dependencies of the loader result, even initial dependencies and those of other loaders. Consider using `pitch`. - +移除 loader 结果的所有依赖,甚至自己和其它 loader 的初始依赖。考虑使用 pitch。 ### `this.emitFile` @@ -435,36 +419,33 @@ Remove all dependencies of the loader result, even initial dependencies and thos emitFile(name: string, content: Buffer|string, sourceMap: {...}) ``` -Emit a file. This is webpack-specific. - +产生一个文件。这是 webpack 特有的。 ### `this.hot` -Information about HMR for loaders. +loaders 的 HMR(热模块替换) 相关信息。 ```javascript module.exports = function(source) { console.log(this.hot); // true if HMR is enabled via --hot flag or webpack configuration + // 如果通过--hot flag或webpack配置启用HMR,则为true return source; }; ``` ### `this.fs` -Access to the `compilation`'s `inputFileSystem` property. - +用于访问 compilation 的 inputFileSystem 属性。 ### `this.mode` -Read in which [`mode`](/configuration/mode/) webpack is running. - -Possible values: `'production'`, `'development'`, `'none'` - +当 webpack 运行时读取 [`mode`](/configuration/mode/) 的值 -## Deprecated context properties +可能的值为:"production", "development", "none" -W> The usage of these properties is highly discouraged since we are planning to remove them from the context. They are still listed here for documentation purposes. +## 过时的上下文属性 +由于我们计划将这些属性从上下文中移除,因此不鼓励使用这些属性。它们仍然列在这里,以备参考。 ### `this.exec` @@ -472,51 +453,47 @@ W> The usage of these properties is highly discouraged since we are planning to exec(code: string, filename: string) ``` -Execute some code fragment like a module. See [this comment](https://github.com/webpack/webpack.js.org/issues/1268#issuecomment-313513988) for a replacement method if needed. - +像模块一样执行一些代码片段。 如果有需要查看本注释 [this comment](https://github.com/webpack/webpack.js.org/issues/1268#issuecomment-313513988) 替换方法。 ### `this.value` -Pass values to the next loader. If you know what your result exports if executed as a module, set this value here (as an only element array). - +向下一个 loader 传值。如果你知道了作为模块执行后的结果,请在这里赋值(以元素数组的形式)。 ### `this.inputValue` -Passed from the last loader. If you would execute the input argument as a module, consider reading this variable for a shortcut (for performance). +从上一个 loader 那里传递过来的值。如果你会以模块的方式处理输入参数,建议预先读入这个变量(为了性能因素)。 ### `this.debug` -A boolean flag. It is set when in debug mode. +一个布尔值,当处于 debug 模式时为 true。 ### `this.minimize` -Tells if result should be minimized. - +决定处理结果是否应该被压缩。 ### `this._compilation` -Hacky access to the Compilation object of webpack. +一种 hack 写法。用于访问 webpack 的 Compilation 对象。 ### `this._compiler` -Hacky access to the Compiler object of webpack. - +一种 hack 写法。用于访问 webpack 的 Compiler 对象。 ### `this._module` -Hacky access to the Module object being loaded. - +一种 hack 写法。用于访问当前加载的 Module 对象。 ## Error Reporting +## 错误报告 -You can report errors from inside a loader by: +您可以通过以下方式从加载程序内部报告错误: -- Using [this.emitError](/api/loaders/#thisemiterror). Will report the errors without interrupting module's compilation. -- Using `throw` (or other uncaught exception). Throwing an error while a loader is running will cause current module compilation failure. -- Using `callback` (in async mode). Pass an error to the callback will also cause module compilation failure. +- 使用 [this.emitError](/api/loaders/#thisemiterror). 将在不中断模块编译的情况下报告错误。 +- 使用“throw”(或其他未捕获的意外异常)。加载程序运行时引发错误将导致当前模块编译失败。 +- 使用“callback”(异步模式)。向回调传递错误也会导致模块编译失败。 For example: @@ -526,7 +503,7 @@ __./src/index.js__ require('./loader!./lib'); ``` -Throwing an error from loader: +从loader当中抛出错误: __./src/loader.js__ @@ -536,7 +513,7 @@ module.exports = function(source) { }; ``` -Or pass an error to the callback in async mode: +或者在异步模式下,传入一个错误给 callback: __./src/loader.js__ @@ -548,7 +525,7 @@ module.exports = function(source) { }; ``` -The module will get bundled like this: +这个模块将获取像下面的 bundle @@ -565,7 +542,7 @@ throw new Error("Module build failed (from ./src/loader.js):\nError: This is a F /***/ }) ``` -Then the build output will also display the error (Similar to `this.emitError`): +然后构建输出结果将显示错误,与 this.emitError 相似: ``` bash ERROR in ./src/lib.js (./src/loader.js!./src/lib.js) @@ -575,27 +552,27 @@ Error: This is a Fatal Error! @ ./src/index.js 1:0-25 ``` -As you can see below, not only error message, but also details about which loader and module are involved: - -- the module path: `ERROR in ./src/lib.js` -- the request string: `(./src/loader.js!./src/lib.js)` -- the loader path: `(from ./src/loader.js)` -- the caller path: `@ ./src/index.js 1:0-25` +如下所示,不仅有错误消息,还提供了有关所涉及的加载程序和模块的详细信息: -W> The loader path in the error is displayed since webpack 4.12 +- 模块路径: ERROR in ./src/lib.js +- request 字符串:(./src/loader.js!./src/lib.js) +- loader 路径:(from ./src/loader.js) +- 调用路径:@ ./src/index.js 1:0-25 -T> All the errors and warnings will be recorded into `stats`. Please see [Stats Data](/api/stats/#errors-and-warnings). +W> 从 webpack 4.12 开始,loader 路径将在报错信息中显示。 +T> 所有的报错和警告信息将被记录到 state 当中。详情请查看[Stats Data](/api/stats/#errors-and-warnngs)。 ### Inline matchResource -A new inline request syntax was introduced in webpack v4. Prefixing `!=!` to a request will set the `matchResource` for this request. +在webpack v4中引入了一种新的内联请求语法。前缀为“!=!`将为此请求设置“matchResource”。 + +W> 不建议在应用程序代码中使用此语法。 -W> It is not recommended to use this syntax in application code. -Inline request syntax is intended to only be used by loader generated code. -Not following this recommendation will make your code webpack-specific and non-standard. +内联请求语法仅用于加载程序生成的代码。 +不遵循此建议将使您的代码不遵循 webpack 标准和规范。 -T> A relative `matchResource` will resolve relative to the current context of the containing module. +T> 相对的“matchResource”将相对包含模块的当前上下文进行解析。 When a `matchResource` is set, it will be used to match with the [`module.rules`](/configuration/module/#modulerules) instead of the original resource. This can be useful if further loaders should be applied to the resource, or if the module type needs to be changed. It's also displayed in the stats and used for matching [`Rule.issuer`](/configuration/module/#ruleissuer) and [`test` in `splitChunks`](/plugins/split-chunks-plugin/#splitchunkscachegroupscachegrouptest). @@ -608,7 +585,7 @@ __file.js__ console.log('yep'); ``` -A loader could transform the file into the following file and use the `matchResource` to apply the user-specified CSS processing rules: +加载程序可以将文件转换为以下文件,并使用“matchResource”应用用户指定的CSS处理规则: __file.js__ (transformed by loader) @@ -649,8 +626,8 @@ module.exports = function(source) { ## Logging -Logging API is available since the release of webpack 4.37. When `logging` is enabled in [`stats configuration`](/configuration/stats/#statslogging) and/or when [`infrastructure logging`](/configuration/other-options/#infrastructurelogging) is enabled, loaders may log messages which will be printed out in the respective logger format (stats, infrastructure). +自webpack 4.37发布以来,日志API就可用了。当 [`stats configuration`](/configuration/stats/#statslogging) 或者 [`infrastructure logging`](/configuration/other-options/#infrastructurelogging) 开启 logging 时,加载程序可以记录消息,这些消息将以相应的日志格式(stats,infrastructure)打印出来。 -- Loaders should prefer to use `this.getLogger()` for logging which is a shortcut to `compilation.getLogger()` with loader path and processed file. This kind of logging is stored to the Stats and formatted accordingly. It can be filtered and exported by the webpack user. -- Loaders may use `this.getLogger('name')` to get an independent logger with a child name. Loader path and processed file is still added. -- Loaders may use special fallback logic for detecting logging support `this.getLogger() ? this.getLogger() : console` to provide a fallback when an older webpack version is used which does not support `getLogger` method. +- Loaders 最好使用 this.getLogger() 用于日志记录,这是指向 compilation.getLogger() 具有加载程序路径和已处理的文件。这种日志记录被存储到Stats中并相应地格式化。它可以被webpack用户过滤和导出。 +- Loaders 可以使用 this.getLogger("name") 获取具有子名称的独立记录器。仍会添加加载程序路径和已处理的文件。 +- Loaders 可以使用特殊的回退逻辑来检测日志支持 this.getLogger() ? this.getLogger() : console。 在使用不支持 getLogger 方法的旧webpack版本时提供回退选项。