@lipemat/js-boilerplate 9.2.0-beta.7 → 9.2.0-beta.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/config/webpack.dist.js +10 -12
- package/helpers/WebpackAssetsHash.js +80 -0
- package/package.json +1 -1
package/config/webpack.dist.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
const webpack = require( 'webpack' );
|
|
2
2
|
const path = require( 'path' );
|
|
3
|
-
|
|
3
|
+
require( 'node:crypto' );
|
|
4
4
|
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
|
|
5
5
|
const {CleanWebpackPlugin} = require( 'clean-webpack-plugin' );
|
|
6
6
|
const WebpackAssetsManifest = require( 'webpack-assets-manifest' );
|
|
7
7
|
const {SubresourceIntegrityPlugin} = require( 'webpack-subresource-integrity' );
|
|
8
8
|
|
|
9
|
+
const WebpackAssetsHash = require( '../helpers/WebpackAssetsHash' );
|
|
9
10
|
const {getConfig} = require( '../helpers/config' );
|
|
10
11
|
const moduleHelpers = require( '../helpers/modules' );
|
|
11
12
|
const config = require( '../helpers/package-config' );
|
|
@@ -15,6 +16,12 @@ const postcssOptions = getConfig( 'postcss.config.js' );
|
|
|
15
16
|
const babelOptions = getConfig( 'babel.config.js' );
|
|
16
17
|
const cssLoaderOptions = getConfig( 'css-loader.config.js' );
|
|
17
18
|
|
|
19
|
+
const ManifestPlugin = new WebpackAssetsManifest( {
|
|
20
|
+
integrity: true,
|
|
21
|
+
integrityHashes: [ 'sha384' ],
|
|
22
|
+
output: 'manifest.json',
|
|
23
|
+
} );
|
|
24
|
+
|
|
18
25
|
module.exports = {
|
|
19
26
|
devtool: false,
|
|
20
27
|
entry: getEntries(),
|
|
@@ -78,17 +85,8 @@ module.exports = {
|
|
|
78
85
|
new SubresourceIntegrityPlugin( {
|
|
79
86
|
hashFuncNames: [ 'sha384' ],
|
|
80
87
|
} ),
|
|
81
|
-
new
|
|
82
|
-
|
|
83
|
-
integrityHashes: [ 'sha384' ],
|
|
84
|
-
output: 'manifest.json',
|
|
85
|
-
// Add a `hash` so every item in the manifest for browser cache flushing.
|
|
86
|
-
transform( assets ) {
|
|
87
|
-
Object.keys( assets ).forEach( item => {
|
|
88
|
-
assets[ item ].hash = crypto.createHash( 'md5' ).update( assets[ item ].integrity ).digest( 'hex' );
|
|
89
|
-
} );
|
|
90
|
-
},
|
|
91
|
-
} ),
|
|
88
|
+
new WebpackAssetsHash( ManifestPlugin ),
|
|
89
|
+
ManifestPlugin,
|
|
92
90
|
],
|
|
93
91
|
module: {
|
|
94
92
|
rules: [
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
const crypto = require( 'node:crypto' );
|
|
2
|
+
const {Compilation, Compiler} = require( 'webpack' );
|
|
3
|
+
const WebpackAssetsManifest = require( 'webpack-assets-manifest' );
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Webpack plugin for injecting the content hash into
|
|
7
|
+
* the manifest.json created by the `webpack-assets-manifest` plugin.
|
|
8
|
+
*
|
|
9
|
+
*
|
|
10
|
+
*/
|
|
11
|
+
class WebpackAssetsHash {
|
|
12
|
+
/**
|
|
13
|
+
* Pass the same constructed plugin provide to Webpack via
|
|
14
|
+
* the `webpack.dist` script.
|
|
15
|
+
*
|
|
16
|
+
* @param {WebpackAssetsManifest} manifest
|
|
17
|
+
*/
|
|
18
|
+
constructor( manifest ) {
|
|
19
|
+
this.assets = {};
|
|
20
|
+
this.manifest = manifest;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* WebPack plugin entrypoint.
|
|
25
|
+
*
|
|
26
|
+
* @link https://webpack.js.org/contribute/writing-a-plugin/
|
|
27
|
+
*
|
|
28
|
+
* @param {Compiler} compiler
|
|
29
|
+
*/
|
|
30
|
+
apply( compiler ) {
|
|
31
|
+
this.manifest.hooks.transform.tap( 'WebpackAssetsHash', this.addHashToManifest.bind( this ) );
|
|
32
|
+
|
|
33
|
+
compiler.hooks.thisCompilation.tap( 'WebpackAssetsHash', compilation => {
|
|
34
|
+
compilation.hooks.processAssets.tap(
|
|
35
|
+
{
|
|
36
|
+
name: 'WebpackAssetsHash',
|
|
37
|
+
stage: Compilation.PROCESS_ASSETS_STAGE_ANALYSE,
|
|
38
|
+
},
|
|
39
|
+
this.storeContentHash.bind( this, compilation ),
|
|
40
|
+
);
|
|
41
|
+
} );
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Store the content hash of each asset in this class, so we
|
|
46
|
+
* can inject it into the manifest.json file.
|
|
47
|
+
*
|
|
48
|
+
* Hash matches Webpack [contenthash].
|
|
49
|
+
*
|
|
50
|
+
* @param {Compilation} compilation
|
|
51
|
+
*/
|
|
52
|
+
storeContentHash( compilation ) {
|
|
53
|
+
for ( const asset of compilation.getAssets() ) {
|
|
54
|
+
this.assets[ asset.name ] = crypto.createHash( 'md4' )
|
|
55
|
+
.update( asset.source.source() )
|
|
56
|
+
.digest( 'hex' )
|
|
57
|
+
.substring( 0, 20 );
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Inject the `hash` of the content into the manifest.json
|
|
63
|
+
* file generated by webpack-assets-manifest.
|
|
64
|
+
*
|
|
65
|
+
* @param {Object} assets
|
|
66
|
+
*/
|
|
67
|
+
addHashToManifest( assets ) {
|
|
68
|
+
Object.keys( assets ).forEach( item => {
|
|
69
|
+
if ( this.assets[ item ] ) {
|
|
70
|
+
assets[ item ].hash = this.assets[ item ];
|
|
71
|
+
} else {
|
|
72
|
+
// If the content hash was added to the asset name prior to storing.
|
|
73
|
+
assets[ item ].hash = this.assets[ assets[ item ].src ];
|
|
74
|
+
}
|
|
75
|
+
} );
|
|
76
|
+
return assets;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
module.exports = WebpackAssetsHash;
|