This is the second day of my participation in the August Text Challenge.More challenges in August

Webpack plugin mechanism

The Webpack plug-in is a JavaScript object with the Apply method. The Apply attribute is invoked by the Webpack Compiler, and the Compiler object is accessible throughout the compile life cycle.

The characteristics of

Webpack plug-in

Take a look at the use of the WebPack plug-in in your project

const MyPlugin = require('myplugin') const webpack = require('webpack') webpack({ ... , plugins: [new MyPlugin()] ... ,})Copy the code

  • So what are the criteria for being a WebPack plug-in? In general, WebPack plug-ins have the following features:

  • 1. Independent JS modules, exposing corresponding functions

  • 2. The Apply method on the function prototype injects the Compiler object

  • The corresponding WebPack event hook is mounted on the 3.com Piler object

  • 4. The callbacks of event hooks can retrieve the compiled compilation object or, if asynchronous, the corresponding callback

Overall structure:

function MyPlugin(options) {} // 2. Myplugin.prototype. apply = function(compiler) {// 3.com Piler object mounts the corresponding Webpack event hook 4. Plugins ('emit', (compilation, callback) => {... Module.exports = myplugin.exports = myplugin.exports = myplugin.exports = myplugin.exportsCopy the code

The compiler object

Compiler is the editor object of Webpack, which is automatically initialized when webpack is called

The Compiler object contains all webPack configurable content, and we can get all webPack main environment related content from the Compiler object when developing the plug-in.

  • Webpack.js.org/api/compile…
Event hooks trigger What you get type
entry-option Initialize the option – synchronous
run Begin to compile compiler asynchronous
compile The compilation that actually begins, before the compilation object is created Compilation parameters synchronous
compilation Now that I’ve generated the Compilation object, I’m ready to manipulate it compilation synchronous
make Recursively analyze the dependencies starting with Entry and prepare to build each module compilation parallel
after-compile The build process is complete compliation asynchronous
emit Before writing the contents of assets in memory to disk folder compilation asynchronous
after-emit After writing the contents of assets in memory to the disk folder compilation asynchronous
done Complete all compilation procedures stats synchronous
failed When a compilation fails error synchronous

Compilation object

The compilation object represents a single release build and generation resource.

When running WebPack, each time a file change is detected, a new build is created, resulting in a new set of build resources. A compiled object represents the current module resources, compile-generated resources, changing files, and state information that is being traced.

The compilation object has access to all modules and their dependencies (most of which are loop dependencies). At compile time, modules are loaded, closed, optimized, partitioned, hashed, rebuilt, and so on, which will be the main life cycle of any operation in compilation.

  • Webpack.js.org/api/compila…

  • normal-module-loader

Normal module loader, a function that actually loads all modules in a module diagram (a data structure after analyzing all modules) one by one.

Module, is commonly referred to as AMD, CMD and other modular modules.

  • seal

The build closure has started. At this point, no more modules are received and the build closure phase is entered.

  • optimize

Optimized compilation, this event hook is particularly important, many plug-in optimization work based on this event hook, indicating that WebPack has entered the optimization phase

  • optimize-modules

Module optimization

  • optimize-chunks

Chunk optimization phase for Webpack. You can get module dependencies, loaders, etc., and handle them accordingly.

  • additional-assets

This is an asynchronous event hook that allows you to create additional assets for the compilation object, which means that you can asynchronously add your own custom assets to the final production

  • optimize-chunk-assets

Optimize the event hooks of chunk assets. This optimization phase can change chunk assets in order to re-change the content of the resource. Assets are stored in this.assets, but they are not all chunk assets. A chunk has a files attribute that identifies all files created by that chunk. Additional assets are stored in this. AdditionalChunkAssets

  • optimize-assets

Optimize the asynchronous event hooks for all assets. In this phase, you can retrieve all assets directly from this.assets and perform custom operations. Similar to optimize-chunk-assets, but the event hook callback will not get chunks

Example webPack plug-in:

// MyPlugin.js function MyPlugin(options) { // Configure your plugin with options... } MyPlugin.prototype.apply = function (compiler) { compiler.plugin('compile', function (params) { console.log('The compiler is starting to compile... '); }); compiler.plugin('compilation', function (compilation) { console.log('The compiler is starting a new compilation... '); compilation.plugin('optimize', function () { console.log('The compilation is starting to optimize files... '); }); }); // Async event compiler. Plugin ('emit', function (compilation, callback) { console.log('The compilation is going to emit files... '); callback(); }); }; module.exports = MyPlugin;Copy the code

For learning reference only

reference

  • webpack-plugin
  • Comprehensive Webpack tutorial Webpack ebook
  • Explore the WebPack plugin mechanism
  • Take a look at the real Webpack plug-in
  • How to Write a WebPack plugin
  • “Simple Webpack” :5-4 writing Plugin