html-webpack-static-assets-plugin/index.js at master · dawgoc/html-webpack-static-assets-plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
"use strict";

class HtmlWebpackStaticAssetsPlugin {
  constructor(htmlWebpackPlugin, options) {
    this.htmlWebpackPlugin = htmlWebpackPlugin;
    this.options = options;
  }

  throwError(message) {
    throw new Error(`html-webpack-static-assets-plugin: ${message}`);
  }

  logWarning(message) {
    console.warn(`html-webpack-static-assets-plugin: ${message}`);
  }

  apply(compiler) {
    compiler.hooks.compilation.tap(
      "HtmlWebpackStaticAssetsPlugin",
      compilation => {
        if (!this.htmlWebpackPlugin) {
          this.throwError(
            "Provide HtmlWebpackPlugin reference as a first parameter"
          );
        }

        if (!this.options) {
          this.throwError("Provide options.");
        }

        const { headTags, bodyTags } = this.options;

        if (!headTags && !bodyTags) {
          this.throwError(
            "Provide headTags or bodyTags otherwise this plugin is useless. :("
          );
        }

        this.htmlWebpackPlugin
          .getHooks(compilation)
          .alterAssetTagGroups.tapAsync(
            "HtmlWebpackStaticAssetsPlugin",
            (data, cb) => {
              const { assets } = compilation;

              if (headTags) {
                data.headTags = this.getNewTagArray(
                  data.headTags,
                  headTags,
                  assets
                );
              }

              if (bodyTags) {
                data.bodyTags = this.getNewTagArray(
                  data.bodyTags,
                  headTags,
                  assets
                );
              }

              cb(null, data);
            }
          );
      }
    );
  }

  getNewTagArray(currentTagArray, optionsTags, assets) {
    const newTagArray = [...currentTagArray];

    for (var filename in assets) {
      optionsTags.forEach(({ test, tagName, ...attributes }) => {
        if (test.constructor !== RegExp) {
          this.throwError("'test' option value needs to be a type of RegExp.");
        }

        if (!tagName) {
          this.throwError("'tagName' is required!");
        }

        if (test.test(filename)) {
          const newAttributes = {};
          const isItScriptTag = tagName === "script";

          if (isItScriptTag) {
            newAttributes.scr = filename;
          } else {
            newAttributes.href = filename;
          }

          const newTag = {
            tagName,
            voidTag: isItScriptTag,
            attributes: {
              ...newAttributes
            }
          };

          for (var attribute in attributes) {
            if (attribute === "type") {
              attributes[attribute] = attributes[attribute].replace(
                "[.ext]",
                filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2)
              );
            }

            newTag.attributes[attribute] = attributes[attribute];
          }

          newTagArray.push(newTag);
        }
      });
    }

    return newTagArray;
  }
}

module.exports = HtmlWebpackStaticAssetsPlugin;