diff --git a/src/content/concepts/plugins.md b/src/content/concepts/plugins.md index 32f5f1b19abc..b1b551d39189 100644 --- a/src/content/concepts/plugins.md +++ b/src/content/concepts/plugins.md @@ -20,21 +20,18 @@ A webpack **plugin** is a JavaScript object that has an [`apply`](https://develo **ConsoleLogOnBuildWebpackPlugin.js** ```javascript -function ConsoleLogOnBuildWebpackPlugin() { - -}; - -ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) { - compiler.plugin('run', function(compiler, callback) { - console.log("The webpack build process is starting!!!"); - - callback(); - }); -}; +const pluginName = 'ConsoleLogOnBuildWebpackPlugin'; + +class ConsoleLogOnBuildWebpackPlugin { + apply(compiler) { + compiler.hooks.run.tap(pluginName, compilation => { + console.log("The webpack build process is starting!!!"); + }); + } +} ``` -T> As a clever JavaScript developer you may remember the [`Function.prototype.apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) method. Because of this method you can pass any function as plugin (`this` will point to the `compiler`). You can use this style to inline custom plugins in your configuration. - +First parameter of the tap method of the compiler hook should be a camelized version of the plugin name. It is advisable to use a constant for this so it can be reused in all hooks. ## Usage diff --git a/src/utilities/markdown.js b/src/utilities/markdown.js index 86e90a8db7d5..0a9002685026 100644 --- a/src/utilities/markdown.js +++ b/src/utilities/markdown.js @@ -149,7 +149,7 @@ function parseAnchor(string) { return { title: clean, - id: clean.replace(/[^\w]+/g, '-').toLowerCase() + id: clean.replace(/[^\w\u4e00-\u9fa5]+/g, '-').toLowerCase() }; }