webpack-Plug-in

plugins (Plugins)

Plug-ins are the pillar function of Wepback. Webpack itself is built on the same plug-in system you used in the Webpack configuration!

The plug-in is designed to address other things that loader cannot achieve.

Anatomy

The Webpack plugin is a apply JavaScript object with attributes. The apply Webpack property is called by the compiler, and the compiler object can be accessed throughout the compilation life cycle.

Consolelogonbuildwebpackplugin.js

functionfunction(compiler) {  compiler.plugin(function(compiler , callback) {    Console.log ("Webpack build process starts!!! ");    Callback ();  });};

as a smart JavaScript developer, you might remember Function.prototype.apply methods. With this method you can pass any function as a plugin ( this which will point to compiler ). You can use this method in your configuration to inline your custom plug-in.

usage

Since the plug-in can carry parameters/options, you must pass the instance to the attribute in the Webpack configuration plugins new .

Depending on your webpack usage, there are several ways to use plugins.

Configuration

Webpack.config.js

Const Htmlwebpackplugin = require ('Html-webpack-plugin‘);//Install via NPMConst WEBPACK = require ('Webpack‘);//access to built -in pluginsConst PATH = require ('Path‘); Const config={entry:‘./path/to/my/entry/file.js‘, Output: {filename:‘My-first-webpack.bundle.js‘, Path:path.resolve (__dirname,‘Dist‘}, module: {loaders: [{test:/\. (JS|JSX) $/, use:‘Babel-loader‘}]}, plugins: [NewWebpack.optimize.UglifyJsPlugin (),NewHtmlwebpackplugin ({Template: './src/index.html‘})]};module.exports= config;

Node API

even with the Node API, users should pass in properties in the configuration plugins . compiler.applyis not the recommended way to use.

Some-node-script.js

  Const WEBPACK = require ('webpack// access Webpack Runtime (runtime)  Const Configuration = require ('./webpack.config.js');   = webpack (configuration);  Compiler.apply (new  webpack. Progressplugin ());  Compiler.run (function(err, stats) {    //  ...  });

You know: the example above looks very similar to the Webpack itself runtime (runtime). There are a number of examples of usage hidden in the Wepback source code that you can use in your own configuration and scripts.

webpack-Plug-in