1 | # Last Call Webpack Plugin
|
2 |
|
3 | A Webpack plugin that allows you to transform \ modify assets just before Webpack emits them.
|
4 |
|
5 | ## What does the plugin do?
|
6 |
|
7 | 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).
|
8 |
|
9 | It can be used for example to:
|
10 | * Prefix a ``` /* Author: John Doe */ ``` comment on all the .js files Webpack generates.
|
11 | * Run some final optimization on all .css files Webpack generates.
|
12 |
|
13 | ## Installation:
|
14 |
|
15 | Using npm:
|
16 | ```shell
|
17 | $ npm install --save-dev last-call-webpack-plugin
|
18 | ```
|
19 |
|
20 | > :warning: For webpack v3 or below please use `last-call-webpack-plugin@v2.1.2`. The `last-call-webpack-plugin@v3.0.0` version and above supports webpack v4.
|
21 |
|
22 | ## Configuration:
|
23 |
|
24 | The plugin can receive the following options:
|
25 | * assetProcessors: An Array of objects that describe asset processors:
|
26 | * regExp: A regular expression to match the asset name that the processor handles.
|
27 | * processor: A function with the signature of ``` function(assetName, webpackAssetObject, assets) ``` that returns a Promise. If the Promise returns a result this result will replace the assets content.
|
28 | * phase: The webpack compilation phase that at which the processor should be called. Default value is `compilation.optimize-assets`. Can be one of the following values:
|
29 | * `compilation.optimize-chunk-assets`
|
30 | * `compilation.optimize-assets`
|
31 | * `emit`
|
32 | * canPrint: A boolean indicating if the plugin can print messages to the console, defaults to `true`.
|
33 |
|
34 | Note: An environment supporting Promises or a Promise polyfill is needed for this plugin to be used.
|
35 |
|
36 | ## Example:
|
37 |
|
38 | ``` javascript
|
39 | var cssnano = require('cssnano');
|
40 | var LastCallWebpackPlugin = require('last-call-webpack-plugin');
|
41 | module.exports = {
|
42 | module: {
|
43 | loaders: [
|
44 | { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
|
45 | ]
|
46 | },
|
47 | plugins: [
|
48 | new ExtractTextPlugin("styles.css"),
|
49 | new LastCallWebpackPlugin({
|
50 | assetProcessors: [
|
51 | {
|
52 | regExp: /\.js$/,
|
53 | processor: (assetName, asset) => Promise.resolve('// Author: John Doe \n' + asset.source())
|
54 | }, {
|
55 | regExp: /\.css$/,
|
56 | processor: (assetName, asset) => cssnano.process(asset.source())
|
57 | .then(r => r.css)
|
58 | }
|
59 | ],
|
60 | canPrint: true
|
61 | })
|
62 | ]
|
63 | }
|
64 | ```
|
65 |
|
66 | ## Assets manipulation
|
67 |
|
68 | 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).
|
69 |
|
70 | Example:
|
71 |
|
72 | ``` javascript
|
73 | var cssnano = require('cssnano');
|
74 | var LastCallWebpackPlugin = require('last-call-webpack-plugin');
|
75 | module.exports = {
|
76 | module: {
|
77 | loaders: [
|
78 | { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
|
79 | ]
|
80 | },
|
81 | plugins: [
|
82 | new ExtractTextPlugin("styles.css"),
|
83 | new LastCallWebpackPlugin({
|
84 | assetProcessors: [{
|
85 | regExp: /\.css$/,
|
86 | processor: (assetName, asset, assets) => {
|
87 | assets.setAsset(assetName + '.map', null); // Delete the <assetName>.map asset.
|
88 | assets.setAsset(assetName + '.log', 'All OK'); // Add the <assetName>.log asset with the content 'All OK'.
|
89 | return cssnano
|
90 | .process(asset.source())
|
91 | .then(r => r.css)
|
92 | }
|
93 | }],
|
94 | canPrint: true
|
95 | })
|
96 | ]
|
97 | }
|
98 | ```
|
99 |
|
100 | 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).
|
101 |
|
102 | ## License
|
103 |
|
104 | MIT (http://www.opensource.org/licenses/mit-license.php) |
\ | No newline at end of file |