docs(concepts): Update plugins.md (#1871)

Update the plugins page in the concepts section to be compatible with webpack 4. Also adds a note about referencing the plugin name in camel-case when calling the `tap` method.

Author: arjendeblok

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
 

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()
   };
 }