Update for Webpack 5, emit string assets only once (#6)

Author: silverwind

.travis.yml

@@ -1,4 +1,5 @@
 language: node_js
 node_js:
+  - '14'
+  - '12'
   - '10'
-  - '8'

fixture/webpack.config.js

@@ -7,8 +7,8 @@ module.exports = {
 	},
 	entry: __dirname,
 	plugins: [
-		new AddAssetPlugin('rainbow.js', '🌈'),
-		new AddAssetPlugin('cake.js', () => '🎂'),
-		new AddAssetPlugin('cat.js', () => Promise.resolve('🐈'))
+		new AddAssetPlugin('rainbow.js', 'console.log("🌈")'),
+		new AddAssetPlugin('cake.js', () => 'console.log("🎂")'),
+		new AddAssetPlugin('cat.js', () => Promise.resolve('console.log("🐈")'))
 	]
 };

index.js

@@ -1,19 +1,35 @@
 'use strict';
 
+const {Compilation, sources: {RawSource}} = require('webpack');
+
+const tapOptions = {
+	name: 'AddAssetPlugin',
+	stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+};
+
 module.exports = class AddAssetPlugin {
 	constructor(filePath, source) {
 		this.filePath = filePath;
 		this.source = source;
 	}
 
 	apply(compiler) {
-		compiler.hooks.emit.tapPromise('AddAssetPlugin', async compilation => {
-			const source = typeof this.source === 'string' ? this.source : await this.source(compilation);
+		compiler.hooks.compilation.tap('AddAssetPlugin', compilation => {
+			compilation.hooks.processAssets.tapPromise(tapOptions, async () => {
+				let source;
+				if (typeof this.source === 'string') {
+					if (compilation.getAsset(this.filePath)) {
+						// Skip emitting the asset again because it's immutable
+						return;
+					}
+
+					source = this.source;
+				} else {
+					source = await this.source(compilation);
+				}
 
-			compilation.assets[this.filePath] = {
-				source: () => source,
-				size: () => source.length
-			};
+				compilation.emitAsset(this.filePath, new RawSource(source));
+			});
 		});
 	}
 };

package.json

@@ -10,7 +10,7 @@
 		"url": "sindresorhus.com"
 	},
 	"engines": {
-		"node": ">=8"
+		"node": ">=10.13.0"
 	},
 	"scripts": {
 		"test": "xo && ava"
@@ -30,12 +30,12 @@
 	],
 	"devDependencies": {
 		"ava": "^1.4.1",
-		"pify": "^4.0.1",
+		"pify": "^5.0.0",
 		"tempy": "^0.3.0",
-		"webpack": "^4.30.0",
+		"webpack": "^5.4.0",
 		"xo": "^0.24.0"
 	},
 	"peerDependencies": {
-		"webpack": ">=4"
+		"webpack": ">=5"
 	}
 }

test.js

@@ -11,7 +11,7 @@ test('main', async t => {
 	config.output.path = cwd;
 	await pify(webpack)(config);
 	t.true(fs.readFileSync(path.join(cwd, 'unicorn.js'), 'utf8').includes('🦄'));
-	t.is(fs.readFileSync(path.join(cwd, 'rainbow.js'), 'utf8'), '🌈');
-	t.is(fs.readFileSync(path.join(cwd, 'cake.js'), 'utf8'), '🎂');
-	t.is(fs.readFileSync(path.join(cwd, 'cat.js'), 'utf8'), '🐈');
+	t.true(fs.readFileSync(path.join(cwd, 'rainbow.js'), 'utf8').includes('🌈'));
+	t.true(fs.readFileSync(path.join(cwd, 'cake.js'), 'utf8').includes('🎂'));
+	t.true(fs.readFileSync(path.join(cwd, 'cat.js'), 'utf8').includes('🐈'));
 });