extend-webpack-plugin
Advanced tools
A Webpack helper to extend a given webpack plugin's functionality
A simple helper to extend another webpack plugin's functionality.
This will extend the other plugin's prototype to your one and copy the callbacks that the other plugin appends to the compiler on a property named compilerCallbacks.
$ npm install --save-dev extend-webpack-plugin
Ensure you have webpack installed, e.g. npm install -g webpack
After installing our plugin and the plugin you want to extend (static-site-generator-webpack-plugin in the following example) you can start coding your extension
$ npm install --save-dev extend-webpack-plugin static-site-generator-webpack-plugin
const StaticSiteGeneratorWebpackPlugin = require('static-site-generator-webpack-plugin');
const ExtendWebpackPlugin = require('extend-webpack-plugin');
function MyCustomStaticSiteGeneratorPlugin() {
const compilerCallbacks = ExtendWebpackPlugin(this, arguments).compilerCallbacks;
this.emitCallback = compilerCallbacks['emit'];
}
MyCustomStaticSiteGeneratorPlugin.inheritsFrom(StaticSiteGeneratorWebpackPlugin);
MyCustomStaticSiteGeneratorPlugin.prototype.apply = function(compiler) {
var self = this;
compiler.plugin('emit', function(compiler, done) {
self.locals.greet = "Hello from custom"; // Extend param
return self.emitCallback(compiler, done); // call static-site-generator-webpack-plugin's emit callback
});
};
module.exports = MyCustomStaticSiteGeneratorPlugin;
const MyCustomStaticSiteGeneratorPlugin = require('./my-custom-plugin');
const paths = [
'/hello/',
'/world/'
];
const locals = {};
module.exports = {
entry: {
'main': './index.js'
},
output: {
filename: 'index.js',
path: 'build',
libraryTarget: 'umd'
},
plugins: [
new MyCustomStaticSiteGeneratorPlugin('main', paths, locals)
]
};
// Client render (optional):
if (typeof document !== 'undefined') {
console.log('Client render code goes here...');
}
// Exported static site renderer:
module.exports = function render(locals, callback) {
callback(null, '<html>' + locals.greet + ' on ' + locals.path + '</html>');
};
As you can see in the previous example (full code here), you can extend a plugin by:
Calling ExtendWebpackPlugin on constructor:
function MyCustomStaticSiteGeneratorPlugin() {
const compilerCallbacks = ExtendWebpackPlugin(this, arguments).compilerCallbacks;
this.emitCallback = compilerCallbacks['emit'];
}
Then you will call inheritsFrom function of your plugin to the other.
This is a special function that ExtendWebpackPlugin create on Function.prototype, that extend the other plugin's prototype and create a property named parent on your plugin:
MyCustomStaticSiteGeneratorPlugin.inheritsFrom(StaticSiteGeneratorWebpackPlugin);
Finally create your own apply function and create custom steps before or after calling the original plugin's callback
MyCustomStaticSiteGeneratorPlugin.prototype.apply = function(compiler) {
var self = this;
compiler.plugin('emit', function(compiler, done) {
self.locals.greet = "Hello from custom"; // Extend param
return self.emitCallback(compiler, done); // call static-site-generator-webpack-plugin's emit callback
});
};
FAQs
A Webpack helper to extend a given webpack plugin's functionality
The npm package extend-webpack-plugin receives a total of 3 weekly downloads. As such, extend-webpack-plugin popularity was classified as not popular.
We found that extend-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.