Webpack 4 refactor (#11)

Implementing changes to make plugin compatible with Webpack 4

Author: Scott Rocha

plugin.js

@@ -83,58 +83,74 @@ class CspHtmlWebpackPlugin {
       .join('; ');
   }
 
+  /**
+   * Processes HtmlWebpackPlugin's html data adding the CSP defined
+   * @param htmlPluginData
+   * @param compileCb
+   */
+  processCsp(htmlPluginData, compileCb) {
+    const $ = cheerio.load(htmlPluginData.html, {
+      decodeEntities: false
+    });
+
+    // if not enabled, remove the empty tag
+    if (!this.isEnabled(htmlPluginData)) {
+      $('meta[http-equiv="Content-Security-Policy"]').remove();
+
+      // eslint-disable-next-line no-param-reassign
+      htmlPluginData.html = $.html();
+
+      return compileCb(null, htmlPluginData);
+    }
+
+    const policyObj = JSON.parse(JSON.stringify(this.policy));
+
+    const inlineSrc = $('script:not([src])')
+      .map((i, element) => this.hash($(element).html()))
+      .get();
+    const inlineStyle = $('style:not([href])')
+      .map((i, element) => this.hash($(element).html()))
+      .get();
+
+    // Wrapped in flatten([]) to handle both when policy is a string and an array
+    policyObj['script-src'] = flatten([policyObj['script-src']]).concat(
+      inlineSrc
+    );
+    policyObj['style-src'] = flatten([policyObj['style-src']]).concat(
+      inlineStyle
+    );
+
+    $('meta[http-equiv="Content-Security-Policy"]').attr(
+      'content',
+      this.buildPolicy(policyObj)
+    );
+
+    // eslint-disable-next-line no-param-reassign
+    htmlPluginData.html = $.html();
+
+    return compileCb(null, htmlPluginData);
+  }
+
   /**
    * Hooks into webpack to collect assets and hash them, build the policy, and add it into our HTML template
    * @param compiler
    */
   apply(compiler) {
-    compiler.plugin('compilation', compilation => {
-      compilation.plugin(
-        'html-webpack-plugin-after-html-processing',
-        (htmlPluginData, compileCb) => {
-          const $ = cheerio.load(htmlPluginData.html, {
-            decodeEntities: false
-          });
-
-          // if not enabled, remove the empty tag
-          if (!this.isEnabled(htmlPluginData)) {
-            $('meta[http-equiv="Content-Security-Policy"]').remove();
-
-            // eslint-disable-next-line no-param-reassign
-            htmlPluginData.html = $.html();
-
-            return compileCb(null, htmlPluginData);
-          }
-
-          const policyObj = JSON.parse(JSON.stringify(this.policy));
-
-          const inlineSrc = $('script:not([src])')
-            .map((i, element) => this.hash($(element).html()))
-            .get();
-          const inlineStyle = $('style:not([href])')
-            .map((i, element) => this.hash($(element).html()))
-            .get();
-
-          // Wrapped in flatten([]) to handle both when policy is a string and an array
-          policyObj['script-src'] = flatten([policyObj['script-src']]).concat(
-            inlineSrc
-          );
-          policyObj['style-src'] = flatten([policyObj['style-src']]).concat(
-            inlineStyle
-          );
-
-          $('meta[http-equiv="Content-Security-Policy"]').attr(
-            'content',
-            this.buildPolicy(policyObj)
-          );
-
-          // eslint-disable-next-line no-param-reassign
-          htmlPluginData.html = $.html();
-
-          return compileCb(null, htmlPluginData);
-        }
-      );
-    });
+    if (compiler.hooks) {
+      compiler.hooks.compilation.tap('CspHtmlWebpackPlugin', compilation => {
+        compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync(
+          'CspHtmlWebpackPlugin',
+          this.processCsp.bind(this)
+        );
+      });
+    } else {
+      compiler.plugin('compilation', compilation => {
+        compilation.plugin(
+          'html-webpack-plugin-after-html-processing',
+          this.processCsp.bind(this)
+        );
+      });
+    }
   }
 }