From 8d0a490b4a514da221cf2ce8e0e308cbbaaab381 Mon Sep 17 00:00:00 2001 From: mc-zone Date: Tue, 26 Jun 2018 16:56:14 +0800 Subject: [PATCH 1/8] docs(API) Add error report introduction of loaders (#2231) --- src/content/api/loaders.md | 107 ++++++++++++++++++++++++++++++++++++- 1 file changed, 105 insertions(+), 2 deletions(-) diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md index b38c2238def3..3b291e22478f 100644 --- a/src/content/api/loaders.md +++ b/src/content/api/loaders.md @@ -338,8 +338,17 @@ Should a source map be generated. Since generating source maps can be an expensi emitWarning(warning: Error) ``` -Emit a warning. +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) +Module Warning (from ./src/loader.js): +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 configuration](/configuration/stats/#stats). ### `this.emitError` @@ -347,7 +356,16 @@ Emit a warning. emitError(error: Error) ``` -Emit an error. +Emit an error that also can be displayed in the output. + +``` bash +ERROR in ./src/lib.js (./src/loader.js!./src/lib.js) +Module Error (from ./src/loader.js): +Here is an Error! + @ ./src/index.js 1:0-25 +``` + +T> Unlike throwing an Error directly, it will NOT interrupt compiling process of current module. ### `this.loadModule` @@ -471,3 +489,88 @@ Hacky access to the Compiler object of webpack. ### `this._module` Hacky access to the Module object being loaded. + + +## Error Reporting + +There are some ways to throw out errors from inside a loader: + +### Using `this.emitError` + +It just report errors but not interrupt module compiling. + +see [this.emitError](/api/loaders/#this-emiterror). + +### Using `throw` (or other uncaught exception) + +Throw out an uncaught error while loader are running will cause current module compiling failed. + +For example: + +__./src/index.js__ + +```js +require('./loader!./lib'); +``` + +__./src/loader.js__ + +```js +module.exports = function(source){ + throw new Error('Here is an fatal Error!'); +}; +``` + +the module that ouccur this error will be packed into bundle (as an error module) like the following: + +```js-with-links +/***/ "./src/loader.js!./src/lib.js": +/*!************************************!*\ + !*** ./src/loader.js!./src/lib.js ***! + \************************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +throw new Error("Module build failed (from ./src/loader.js):\nError: Here is an fatal Error!\n at Object.module.exports (/workspace/src/loader.js:3:9)"); + +/***/ }) + +``` + +Then the build output will also display the error (Similar to `this.emitError`): + +```bash +ERROR in ./src/lib.js (./src/loader.js!./src/lib.js) +Module build failed (from ./src/loader.js): +Error: Here is an fatal Error! + at Object.module.exports (/workspace/src/loader.js:2:9) + @ ./src/index.js 1:0-25 + +``` + +And you can see these informations 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 about error in the above are added after webpack 4.12 + +### Using `this.callback` (in async mode) + +Pass an error on first argument into callback, used in async mode. + +__./src/loader.js__ + +```js +module.exports = function(source){ + const callback = this.async(); + //... + callback(new Error('Here is an async passthrough Error!'), source); +}; +``` + +Same as throw an error, it will also cause module compiling failed once it happened and result an error module into bundle. + +T> All the errors and warnings will be recorded into `stats`. Please see [Stats Data](/api/stats/#errors-and-warnings). From b6222c7fa79dbe27028622e0e267b3b204171f79 Mon Sep 17 00:00:00 2001 From: mc-zone Date: Tue, 26 Jun 2018 17:12:48 +0800 Subject: [PATCH 2/8] fix markdownlint hints whatever. --- src/content/api/loaders.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md index 3b291e22478f..008806ef3e15 100644 --- a/src/content/api/loaders.md +++ b/src/content/api/loaders.md @@ -353,16 +353,20 @@ T> Note that the warnings will not be displayed if `stats.warnings` is set to `f ### `this.emitError` ``` typescript + 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) Module Error (from ./src/loader.js): Here is an Error! @ ./src/index.js 1:0-25 + ``` T> Unlike throwing an Error directly, it will NOT interrupt compiling process of current module. @@ -371,7 +375,9 @@ T> Unlike throwing an Error directly, it will NOT interrupt compiling process of ### `this.loadModule` ``` typescript + 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. @@ -380,7 +386,9 @@ Resolves the given request to a module, applies all configured loaders and calls ### `this.resolve` ``` typescript + resolve(context: string, request: string, callback: function(err, result: string)) + ``` Resolve a request like a require expression. @@ -389,8 +397,10 @@ Resolve a request like a require expression. ### `this.addDependency` ``` typescript + addDependency(file: string) dependency(file: string) // shortcut + ``` Adds a file as dependency of the loader result in order to make them watchable. For example, [`html-loader`](https://github.com/webpack-contrib/html-loader) uses this technique as it finds `src` and `src-set` attributes. Then, it sets the url's for those attributes as dependencies of the html file that is parsed. @@ -399,7 +409,9 @@ Adds a file as dependency of the loader result in order to make them watchable. ### `this.addContextDependency` ``` typescript + addContextDependency(directory: string) + ``` Add a directory as dependency of the loader result. @@ -408,7 +420,9 @@ Add a directory as dependency of the loader result. ### `this.clearDependencies` ``` typescript + clearDependencies() + ``` Remove all dependencies of the loader result. Even initial dependencies and these of other loaders. Consider using `pitch`. @@ -417,7 +431,9 @@ Remove all dependencies of the loader result. Even initial dependencies and thes ### `this.emitFile` ``` typescript + emitFile(name: string, content: Buffer|string, sourceMap: {...}) + ``` Emit a file. This is webpack-specific. @@ -436,7 +452,9 @@ W> The usage of these properties is highly discouraged since we are planning to ### `this.exec` ``` typescript + 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. @@ -445,7 +463,9 @@ Execute some code fragment like a module. See [this comment](https://github.com/ ### `this.resolveSync` ``` typescript + resolveSync(context: string, request: string) -> string + ``` Resolve a request like a require expression. @@ -510,20 +530,25 @@ For example: __./src/index.js__ ```js + require('./loader!./lib'); + ``` __./src/loader.js__ ```js + module.exports = function(source){ throw new Error('Here is an fatal Error!'); }; + ``` the module that ouccur this error will be packed into bundle (as an error module) like the following: ```js-with-links + /***/ "./src/loader.js!./src/lib.js": /*!************************************!*\ !*** ./src/loader.js!./src/lib.js ***! @@ -540,6 +565,7 @@ throw new Error("Module build failed (from ./src/loader.js):\nError: Here is an Then the build output will also display the error (Similar to `this.emitError`): ```bash + ERROR in ./src/lib.js (./src/loader.js!./src/lib.js) Module build failed (from ./src/loader.js): Error: Here is an fatal Error! @@ -564,11 +590,13 @@ Pass an error on first argument into callback, used in async mode. __./src/loader.js__ ```js + module.exports = function(source){ const callback = this.async(); //... callback(new Error('Here is an async passthrough Error!'), source); }; + ``` Same as throw an error, it will also cause module compiling failed once it happened and result an error module into bundle. From d2fc723581e673996811763ba027f75968fc5a2f Mon Sep 17 00:00:00 2001 From: mc-zone Date: Tue, 14 Aug 2018 21:03:28 +0800 Subject: [PATCH 3/8] docs(api) Rephrase loaders.md --- src/content/api/loaders.md | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md index 008806ef3e15..1fab5115cb78 100644 --- a/src/content/api/loaders.md +++ b/src/content/api/loaders.md @@ -513,17 +513,16 @@ Hacky access to the Module object being loaded. ## Error Reporting -There are some ways to throw out errors from inside a loader: +Here are the ways to throw an error from inside a loader: ### Using `this.emitError` -It just report errors but not interrupt module compiling. +[this.emitError](/api/loaders/#this-emiterror) will report the errors without interrupting module's compilation. -see [this.emitError](/api/loaders/#this-emiterror). ### Using `throw` (or other uncaught exception) -Throw out an uncaught error while loader are running will cause current module compiling failed. +Throwing an error while a loader is running will cause current module compilation failure. For example: @@ -545,7 +544,7 @@ module.exports = function(source){ ``` -the module that ouccur this error will be packed into bundle (as an error module) like the following: +The module on which loader had thrown this error will get bundled like this: ```js-with-links @@ -574,18 +573,18 @@ Error: Here is an fatal Error! ``` -And you can see these informations below, not only error message, but also details about which loader and module are involved: +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 about error in the above are added after webpack 4.12 +W> The loader path in the error is displayed since webpack 4.12 -### Using `this.callback` (in async mode) +### Using `callback` (in async mode) -Pass an error on first argument into callback, used in async mode. +Pass an error to the callback. __./src/loader.js__ @@ -594,11 +593,11 @@ __./src/loader.js__ module.exports = function(source){ const callback = this.async(); //... - callback(new Error('Here is an async passthrough Error!'), source); + callback(new Error('Here is an Error!'), source); }; ``` -Same as throw an error, it will also cause module compiling failed once it happened and result an error module into bundle. +Same as using throw, it will also cause module compilation failure and get an error module in the bundle. T> All the errors and warnings will be recorded into `stats`. Please see [Stats Data](/api/stats/#errors-and-warnings). From 9e121ac2c965423c9daccb7a92ee6de438b539dd Mon Sep 17 00:00:00 2001 From: mc-zone Date: Thu, 16 Aug 2018 09:30:04 +0800 Subject: [PATCH 4/8] docs(api) Update loaders.md (#2298) Fix typo. Use js instead of js-with-link. --- src/content/api/loaders.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md index 1fab5115cb78..ec55135a5604 100644 --- a/src/content/api/loaders.md +++ b/src/content/api/loaders.md @@ -369,7 +369,7 @@ Here is an Error! ``` -T> Unlike throwing an Error directly, it will NOT interrupt compiling process of current module. +T> Unlike throwing an Error directly, it will NOT interrupt the compilation process of the current module. ### `this.loadModule` @@ -539,14 +539,15 @@ __./src/loader.js__ ```js module.exports = function(source){ - throw new Error('Here is an fatal Error!'); + throw new Error('Here is a Fatal Error!'); }; ``` The module on which loader had thrown this error will get bundled like this: -```js-with-links + +```js /***/ "./src/loader.js!./src/lib.js": /*!************************************!*\ From a556da2819961562f172db32eab4d8a668c70fb4 Mon Sep 17 00:00:00 2001 From: mc-zone Date: Fri, 23 Nov 2018 13:12:08 +0800 Subject: [PATCH 5/8] fix lint error --- src/content/api/loaders.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md index ba6ff62078d5..d0907744cce5 100644 --- a/src/content/api/loaders.md +++ b/src/content/api/loaders.md @@ -547,6 +547,7 @@ module.exports = function(source){ The module on which loader had thrown this error will get bundled like this: + ```js /***/ "./src/loader.js!./src/lib.js": From 07a10ae9a92697b3ea52e1985f3f9ebc060380e4 Mon Sep 17 00:00:00 2001 From: mc-zone Date: Tue, 27 Nov 2018 14:29:27 +0800 Subject: [PATCH 6/8] docs(api) Some indent and content refactor --- src/content/api/loaders.md | 93 ++++++++++++++++---------------------- 1 file changed, 38 insertions(+), 55 deletions(-) diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md index d0907744cce5..7b635cc66339 100644 --- a/src/content/api/loaders.md +++ b/src/content/api/loaders.md @@ -25,7 +25,7 @@ Either `return` or `this.callback` can be used to return the transformed `conten __sync-loader.js__ -``` js +``` javascript module.exports = function(content, map, meta) { return someSyncOperation(content); }; @@ -35,7 +35,7 @@ The `this.callback` method is more flexible as it allows multiple arguments to b __sync-loader-with-multiple-results.js__ -``` js +``` javascript module.exports = function(content, map, meta) { this.callback(null, someSyncOperation(content), map, meta); return; // always return undefined when calling callback() @@ -48,7 +48,7 @@ For asynchronous loaders, [`this.async`](/api/loaders#this-async) is used to ret __async-loader.js__ -``` js +``` javascript module.exports = function(content, map, meta) { var callback = this.async(); someAsyncOperation(content, function(err, result) { @@ -60,7 +60,7 @@ module.exports = function(content, map, meta) { __async-loader-with-multiple-results.js__ -``` js +``` javascript module.exports = function(content, map, meta) { var callback = this.async(); someAsyncOperation(content, function(err, result, sourceMaps, meta) { @@ -79,7 +79,7 @@ By default, the resource file is converted to a UTF-8 string and passed to the l __raw-loader.js__ -``` js +``` javascript module.exports = function(content) { assert(content instanceof Buffer); return someSyncOperation(content); @@ -94,7 +94,7 @@ module.exports.raw = true; 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). For the following [`use`](/configuration/module#rule-use) configuration: -``` js +``` javascript module.exports = { //... module: { @@ -128,7 +128,7 @@ So why might a loader take advantage of the "pitching" phase? 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. -``` js +``` javascript module.exports = function(content) { return someSyncOperation(content, this.data.value); }; @@ -140,7 +140,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: -``` js +``` javascript module.exports = function(content) { return someSyncOperation(content); }; @@ -170,7 +170,7 @@ The loader context represents the properties that are available inside of a load Given the following example this require call is used: In `/abc/file.js`: -``` js +``` javascript require('./loader1?xyz!loader2!./resource?rrr'); ``` @@ -213,7 +213,7 @@ A function that can be called synchronously or asynchronously in order to return -```js +``` javascript this.callback( err: Error | null, content: string | Buffer, @@ -261,13 +261,13 @@ An array of all the loaders. It is writeable in the pitch phase. -```js +``` javascript loaders = [{request: string, path: string, query: string, module: function}] ``` In the example: -``` js +``` javascript [ { request: '/abc/loader1.js?xyz', @@ -513,43 +513,47 @@ Hacky access to the Module object being loaded. ## Error Reporting -Here are the ways to throw an error from inside a loader: +You can report errors from inside a loader by: -### Using `this.emitError` - -[this.emitError](/api/loaders/#this-emiterror) 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 [this.emitError](/api/loaders/#this-emiterror). 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. For example: __./src/index.js__ -```js - +``` javascript require('./loader!./lib'); - ``` -__./src/loader.js__ +Throwing an error from loader: -```js +__./src/loader.js__ -module.exports = function(source){ - throw new Error('Here is a Fatal Error!'); +``` javascript +module.exports = function(source) { + throw new Error('This is a Fatal Error!'); }; +``` + +Or pass an error to the callback in async mode: + +__./src/loader.js__ +``` javascript +module.exports = function(source) { + const callback = this.async(); + //... + callback(new Error('This is a Fatal Error!'), source); +}; ``` -The module on which loader had thrown this error will get bundled like this: +The module will get bundled like this: -```js - +``` javascript /***/ "./src/loader.js!./src/lib.js": /*!************************************!*\ !*** ./src/loader.js!./src/lib.js ***! @@ -557,22 +561,19 @@ The module on which loader had thrown this error will get bundled like this: /*! no static exports found */ /***/ (function(module, exports) { -throw new Error("Module build failed (from ./src/loader.js):\nError: Here is an fatal Error!\n at Object.module.exports (/workspace/src/loader.js:3:9)"); +throw new Error("Module build failed (from ./src/loader.js):\nError: This is a Fatal Error!\n at Object.module.exports (/workspace/src/loader.js:3:9)"); /***/ }) - ``` Then the build output will also display the error (Similar to `this.emitError`): -```bash - +``` bash ERROR in ./src/lib.js (./src/loader.js!./src/lib.js) Module build failed (from ./src/loader.js): -Error: Here is an fatal Error! +Error: This is a Fatal Error! at Object.module.exports (/workspace/src/loader.js:2:9) @ ./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: @@ -584,22 +585,4 @@ As you can see below, not only error message, but also details about which loade W> The loader path in the error is displayed since webpack 4.12 -### Using `callback` (in async mode) - -Pass an error to the callback. - -__./src/loader.js__ - -```js - -module.exports = function(source){ - const callback = this.async(); - //... - callback(new Error('Here is an Error!'), source); -}; - -``` - -Same as using throw, it will also cause module compilation failure and get an error module in the bundle. - T> All the errors and warnings will be recorded into `stats`. Please see [Stats Data](/api/stats/#errors-and-warnings). From bcbdfd00931c1eef25f8b58a0d228f27fe3f6dab Mon Sep 17 00:00:00 2001 From: mc-zone Date: Tue, 27 Nov 2018 14:31:24 +0800 Subject: [PATCH 7/8] docs(api) add missing quote --- src/content/api/loaders.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md index 7b635cc66339..8358eb03911a 100644 --- a/src/content/api/loaders.md +++ b/src/content/api/loaders.md @@ -516,7 +516,7 @@ Hacky access to the Module object being loaded. You can report errors from inside a loader by: - Using [this.emitError](/api/loaders/#this-emiterror). 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 `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. For example: From d4fc0cc8af202d63fc535daaebe7850208928001 Mon Sep 17 00:00:00 2001 From: mc-zone Date: Tue, 27 Nov 2018 14:37:23 +0800 Subject: [PATCH 8/8] docs(api) remove extra blank lines --- src/content/api/loaders.md | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/src/content/api/loaders.md b/src/content/api/loaders.md index 8358eb03911a..8beee43ad66d 100644 --- a/src/content/api/loaders.md +++ b/src/content/api/loaders.md @@ -345,7 +345,6 @@ WARNING in ./src/lib.js (./src/loader.js!./src/lib.js) Module Warning (from ./src/loader.js): 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 configuration](/configuration/stats/#stats). @@ -353,20 +352,16 @@ T> Note that the warnings will not be displayed if `stats.warnings` is set to `f ### `this.emitError` ``` typescript - 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) Module Error (from ./src/loader.js): 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. @@ -375,9 +370,7 @@ T> Unlike throwing an Error directly, it will NOT interrupt the compilation proc ### `this.loadModule` ``` typescript - 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. @@ -386,9 +379,7 @@ Resolves the given request to a module, applies all configured loaders and calls ### `this.resolve` ``` typescript - resolve(context: string, request: string, callback: function(err, result: string)) - ``` Resolve a request like a require expression. @@ -397,10 +388,8 @@ Resolve a request like a require expression. ### `this.addDependency` ``` typescript - addDependency(file: string) dependency(file: string) // shortcut - ``` Adds a file as dependency of the loader result in order to make them watchable. For example, [`html-loader`](https://github.com/webpack-contrib/html-loader) uses this technique as it finds `src` and `src-set` attributes. Then, it sets the url's for those attributes as dependencies of the html file that is parsed. @@ -409,9 +398,7 @@ Adds a file as dependency of the loader result in order to make them watchable. ### `this.addContextDependency` ``` typescript - addContextDependency(directory: string) - ``` Add a directory as dependency of the loader result. @@ -420,9 +407,7 @@ Add a directory as dependency of the loader result. ### `this.clearDependencies` ``` typescript - clearDependencies() - ``` Remove all dependencies of the loader result. Even initial dependencies and these of other loaders. Consider using `pitch`. @@ -431,9 +416,7 @@ Remove all dependencies of the loader result. Even initial dependencies and thes ### `this.emitFile` ``` typescript - emitFile(name: string, content: Buffer|string, sourceMap: {...}) - ``` Emit a file. This is webpack-specific. @@ -452,9 +435,7 @@ W> The usage of these properties is highly discouraged since we are planning to ### `this.exec` ``` typescript - 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. @@ -463,9 +444,7 @@ Execute some code fragment like a module. See [this comment](https://github.com/ ### `this.resolveSync` ``` typescript - resolveSync(context: string, request: string) -> string - ``` Resolve a request like a require expression.