Writing Webpack Plugins

The Webpack plugin is the most likely to release webpack for third-party developers. The multi-level callback developers can bring their own needs into the webpack. The build plugin is much further than build loader. Because you need to understand what's on the bottom of webpack. To have the source code ready at the end of the month.

Compiler and compilation

The most important two resources for developing plug-ins are compiler and compilation objects, and understanding them is an important step in extending Webpack

• The compiler object contains the configuration information for the Webpack environment, which was built at the start of the Webpack and configured with all settings options including Options,loaders,plugins. When a plugin is enabled to the Webpack environment, the plugin will accept a parameter pointing to compiler. Use this parameter to get to the webpack environment
• Compilation represents a single build version of the item. When the Webpack middleware is running, a new compilation is generated whenever a file changes, resulting in a new, mutated collection of items. Compilation lists a lot of information about current module resources, compiled resource information, modified files, and monitored dependencies. Compilation also provides a callback point for plugins that require custom functionality.

These two components are an integral part of all Webpack plugins (especially compilation), so it would be beneficial for developers to be familiar with the source files for both components:

• Compiler source File
• Compilation source File

Plug-in basic structure

Plugins is an object that can be instantiated using its own prototype method, apply. Apply is only performed once by Webpack compiler the installation plugin. The Apply method passes in a reference to the WEBPCK compiler to access the compiler callback.

A simple plug-in structure:

1 functionHelloworldplugin (options) {2   //Setup The plugin instance with options ...3 }4 5HelloWorldPlugin.prototype.apply =function(compiler) {6Compiler.plugin (' Done ',function() {7Console.log (' Hello world! '); 8   });9 };Ten  OneModule.exports = Helloworldplugin;

When installing a plug-in, simply place an instance of it in the Webpack Config plugins array:

1 var Helloworldplugin = require (' Hello-world '); 2 3 var webpackconfig = {4   /  ... config settings here ... 5   plugins: [6     newtrue})7  ]  8 };

Visit compilation

With the compiler object, you may need to bind a callback function with references to each new compilation. These compilation provide callback functions that are concatenated into many of the steps in the build process.

1 functionHellocompilationplugin (options) {}2 3HelloCompilationPlugin.prototype.apply =function(compiler) {4 5   //Setup callback for accessing a compilation:6Compiler.plugin ("compilation",function(compilation) {7 8     //Now Setup callbacks for accessing compilation steps:9Compilation.plugin ("Optimize",function() {TenConsole.log ("Assets is being optimized."); One     }); A   }); - }); -  theModule.exports = Hellocompilationplugin;

More about which callbacks are useful in objects such as compiler, compilation, and more, take a look
Plugins API

Asynchronously compiled plug-ins

Some compilation plug-in steps are asynchronous and pass in a callback function that must be called when your plug-in is finished running.

1 functionHelloasyncplugin (options) {}2 3HelloAsyncPlugin.prototype.apply =function(compiler) {4Compiler.plugin ("Emit",function(compilation, callback) {5 6     //Do something async ...7SetTimeout (function() {8Console.log ("Done with async work ...");9 callback ();Ten}, 1000); One  A   }); - }); -  theModule.exports = Helloasyncplugin;

Example

We know the Webpack compiler and the various compilations, and we can use them to create endless possibilities. We can reset the format of the current file, generate a derivative file, or create a new assets

Below we will write a simple plugin that generates a filelist.md file with the contents of all the asset files that list our build.

1 functionFilelistplugin (options) {}2 3FileListPlugin.prototype.apply =function(compiler) {4Compiler.plugin (' Emit ',function(compilation, callback) {5     //Create A header string for the generated file:6     varFileList = ' In this build:\n\n ';7 8     //Loop through all compiled assets,9     //Adding a new line item for each filename.Ten      for(varFileNameinchcompilation.assets) { OneFileList + = ('-' + filename + ' \ n ')); A     } -  -     //Insert This list into the Webpack build as a new file asset: thecompilation.assets[' filelist.md '] = { -Sourcefunction() { -         returnfilelist; -       }, +Sizefunction() { -         returnfilelist.length; +       } A     }; at  - callback (); -   }); - }; -  -Module.exports = Filelistplugin;

Writing Webpack Plugins