A Webpack plugin that allows you to transform \ modify assets just before Webpack emits them.
It allows you to transform \ modify Webpack assets just before Webpack emits them (writes them to files or memory in case you are using something like Webpack dev server).
It can be used for example to:
/* Author: John Doe */
comment on all the .js files Webpack generates.Using npm:
$ npm install --save-dev last-call-webpack-plugin
⚠️ For webpack v3 or below please use
last-call-webpack-plugin@v2.1.2
. Thelast-call-webpack-plugin@v3.0.0
version and above supports webpack v4.
The plugin can receive the following options:
function(assetName, webpackAssetObject, assets)
that returns a Promise. If the Promise returns a result this result will replace the assets content.compilation.optimize-assets
. Can be one of the following values:
compilation.optimize-chunk-assets
compilation.optimize-assets
emit
true
.Note: An environment supporting Promises or a Promise polyfill is needed for this plugin to be used.
var cssnano = require('cssnano');
var LastCallWebpackPlugin = require('last-call-webpack-plugin');
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
new LastCallWebpackPlugin({
assetProcessors: [
{
regExp: /\.js$/,
processor: (assetName, asset) => Promise.resolve('// Author: John Doe \n' + asset.source())
}, {
regExp: /\.css$/,
processor: (assetName, asset) => cssnano.process(asset.source())
.then(r => r.css)
}
],
canPrint: true
})
]
}
The processor
method is supplied an assets
object that allows asset manipulation via the setAsset(assetName, assetValue)
method. If assetValue
is null the asset will be deleted. This object can be used to generate aditional assets (like source maps) or rename the an asset (create a new asset and delete the current one).
Example:
var cssnano = require('cssnano');
var LastCallWebpackPlugin = require('last-call-webpack-plugin');
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
new LastCallWebpackPlugin({
assetProcessors: [{
regExp: /\.css$/,
processor: (assetName, asset, assets) => {
assets.setAsset(assetName + '.map', null); // Delete the <assetName>.map asset.
assets.setAsset(assetName + '.log', 'All OK'); // Add the <assetName>.log asset with the content 'All OK'.
return cssnano
.process(asset.source())
.then(r => r.css)
}
}],
canPrint: true
})
]
}
The assets
object also has a getAsset(assetName)
method to get the content of an asset (returns undefined in case the asset does not exist).