Introduction to the

How to implement a simple plugin

Create a custom plugin step

  • Declare a JS function or class (big camel name)
  • Define a prototype method, Apply, that receives a Compiler object, in which we can call the compiler object’s hooks events. Modify instance specific data within WebPack using the Compilation manipulation.
  • The callback provided by WebPack is invoked when the functionality is complete.
callback();
// or
callback(error);
Copy the code

Knowledge to prepare

Now that we know how to create a custom plugin, what is the Compiler object? How do we manipulate instance specific data within WebPack?

compiler

Compiler is the main engine for Webpack, which creates a Compilation instance through all the options passed through the CLI (which we normally configure in webpack.config.js), or through the Node API. It extends the Tapable class to register and invoke plug-ins.

Compiler exposed lifecycle hooks functions

  • Compiler.hooks. Emit, lifecycle: Executes before exporting asset to output directory.
Compiler.hooks. Emit. Tap ('clean-webpack-plugin', compilation => {// execute operations});Copy the code
  • Compiler.hooks. Done, lifecycle: executed when compilation is completed
Compiler.hooks. Done. Tap ('clean-webpack-plugin', stats => {// execute action});Copy the code
  • Compiler. Hooks. ShouldEmit, life cycle: call before output asset. Returns a Boolean value telling whether to output.
Compiler. Hooks. ShouldEmit. Tap (' the clean - webpack - the plugin, (compilation) = > {/ / return true for output the output results, Otherwise return false return true; });Copy the code

Compiler of hook function has a lot of, we don’t need to know, can be checked when need to use the API: webpack.docschina.org/api/compile…

compilation

The compilation module is used by compiler to create new compilation objects. The Compilation instance has access to all of the modules and their dependencies, and it literally compiles all of the modules in the dependency diagram of the application. At compile time, Modules are loaded, sealed, optimized, chunk, hashed, and restored.

The compilation exposed life cycle hooks functions

  • Compilation. Hooks. BuildModule, life cycle: in the building before the start of the trigger module, which can be used to modify the module.
compilation.hooks.buildModule.tap( 'SourceMapDevToolModuleOptionsPlugin', (module) => { module.useSourceMap = true; });Copy the code
  • Compilation. Hooks. FailedModule, life cycle: module build fails.
Compilation. Hooks. FailedModule. Tap (' SourceMapDevToolModuleOptionsPlugin '(the module, the error) = > {} / / operations carried out);Copy the code

Differ a name, attach the API documentation: webpack.docschina.org/api/compila…

Compilation object methods

  • Compilation.getstats (), which returns the current compiled state object
  • Compiler.addentry (), which adds an entry for compilation.
  • Compilation.finish () to complete the compilation and invoke the given callback.

Differ a name, attach the API documentation: webpack.docschina.org/api/compila…

Based on the above, a simple plugin comes out!

Class CleanWebpackPlugin {// Constructor // check options. https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional constructor(options) { console.log(options, 'options'); this.outputPath = ''; } apply(compiler) { console.log(compiler, 'compiler). / / the compiler options for the config file or a shell command initialization configuration information enclosing outputPath = compiler. The options. The output. The path; // Bind the hook event const hooks = compiler.hooks; hooks.done.tap('clean-webpack-plugin', stats => { console.log('done~') }); }}Copy the code

Introduce custom plugins

This is very simple, as usual to introduce plugin is OK

Const {CleanWebpackPlugin} = require('./ cleanwebpack-plugin '); Module.exports = {plugins: [// instantiate constructor new CleanWebpackPlugin(),]}Copy the code

The last

Thank you for reading, if you have any questions please correct!