feat: Webpack 5 compatibility

Use processAssets hook to delete files and remove entries from the compilation.assets

Author: duncanbeevers

index.js

@@ -2,6 +2,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { inlineSource } = require('inline-source');
 const { getTagRegExp } = require('inline-source/lib/utils');
 const htmlparser = require('htmlparser2');
+const { Compilation } = require('webpack');
 
 class InlineSourceWebpackPlugin {
   constructor(options = {}) {
@@ -69,7 +70,7 @@ class InlineSourceWebpackPlugin {
           compilation.fileDependencies.add(source.filepath);
         } else {
           // Before Webpack 4
-          // fileDepenencies was an array
+          // fileDependencies was an array
           compilation.fileDependencies.push(source.filepath);
         }
       }
@@ -124,7 +125,13 @@ class InlineSourceWebpackPlugin {
    */
   _deleteAsset(compilation) {
     if (this.deleteAssets.length) {
-      this.deleteAssets.forEach(asset => delete compilation.assets[asset.name]);
+      if ('deleteAsset' in compilation) {
+        this.deleteAssets.forEach(asset => {
+          compilation.deleteAsset(asset.name);
+        });
+      } else {
+        this.deleteAssets.forEach(asset => delete compilation.assets[asset.name]);
+      }
     }
     this.deleteAssets = [];
   }
@@ -157,10 +164,19 @@ class InlineSourceWebpackPlugin {
           }
         });
       }
-      compiler.hooks.emit.tapAsync(name, (compilation, callback) => {
-        this._deleteAsset(compilation);
-        callback && callback();
-      });
+      if (Compilation && Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE) {
+        compiler.hooks.thisCompilation.tap(name, compilation => {
+          compilation.hooks.processAssets.tap(
+            { name, stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE },
+            () => { this._deleteAsset(compilation); }
+          );
+        });
+      } else {
+        compiler.hooks.emit.tapAsync(name, (compilation, callback) => {
+          this._deleteAsset(compilation);
+          callback && callback();
+        });
+      }
     } else {
       // webpack 2 or 3
       compiler.plugin('compilation', compilation => {

test/index.spec.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const rimraf = require('rimraf');
 const webpack = require('webpack');
@@ -17,7 +18,6 @@ const baseWebpackConfig = {
     filename: '[name].[contenthash].js'
   },
   optimization: {
-    namedChunks: true,
     runtimeChunk: 'single'
   },
   mode: 'production'
@@ -79,16 +79,10 @@ function testInlineSourceWebpackPlugin(
       ).toBeTruthy();
     }
     if (expectResults && expectResults.length) {
-      const content = stats.compilation.assets[outputFile].source();
-      expect(
-        expectResults.every(result => {
-          if (result instanceof RegExp) {
-            return result.test(content);
-          } else {
-            return content.indexOf(result) > -1;
-          }
-        })
-      ).toBeTruthy();
+      const content = fs.readFileSync(path.join(__dirname, `../dist/${outputFile}`)).toString();
+      expectResults.forEach(result => {
+        expect(content).toMatch(result);
+      });
     }
     done();
   });
@@ -110,11 +104,11 @@ describe('InlineSourceWebpackPlugin', () => {
         // inline.js
         `<script>function Person(){}Person.prototype.sayHello=function(){console.log("[inline]:","hello world!")},(new Person).sayHello();</script>`,
         // webpack runtime file
-        `window.webpackJsonp=window.webpackJsonp||[]`,
+        `webpack`,
         // bundle.js
         `console.log("This file is build by webpack.But InlineSourceWebpackPlugin will embed it into html file.")`,
         // appended by html-webpack-plugin
-        /<script src="\/inline-source-webpack-plugin\/dist\/index\.\w+\.js"><\/script>/
+        /<script (?:defer="defer" )?src="\/inline-source-webpack-plugin\/dist\/index\.\w+\.js"><\/script>/
       ]
     });
   });
@@ -190,8 +184,6 @@ describe('InlineSourceWebpackPlugin', () => {
     testInlineSourceWebpackPlugin({
       webpackConfig,
       done,
-      expectOutputFiles: [/index\.html$/, /index\.\w+\.js$/, /runtime\.\w+\.js$/, /bundle\.\w+\.js$/],
-      expectResults: ['<!--inline-source-webpack-plugin-->'],
       hasErrors: true
     });
   });