webpack-inline-source-plugin/webpack-inline-source-plugin.js at master · sheweifan/webpack-inline-source-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
const fs = require("fs");

function extractSource(path) {
  return fs
    .readFileSync(path, {
      encoding: "utf8",
    })
    .toString();
}

class InlineChunkHtmlPlugin {
  constructor(htmlWebpackPlugin, config = {}) {
    this.htmlWebpackPlugin = htmlWebpackPlugin;
    this.config = Object.assign(
      {
        maxSize: 20 * 1024,
        js: [],
        css: [],
      },
      config
    );
  }

  getInlinedTag(publicPath, assets, tag) {
    const maxSize = this.config.maxSize;
    if (
      (tag.tagName !== "script" || !(tag.attributes && tag.attributes.src)) &&
      (tag.tagName !== "link" || !(tag.attributes && tag.attributes.href))
    ) {
      return tag;
    }

    if (tag.tagName === "script") {
      const scriptName = publicPath
        ? tag.attributes.src.replace(publicPath, "")
        : tag.attributes.src;

      const asset = assets[scriptName];
      if (asset == null || asset.size() > maxSize) {
        return tag;
      }
      return { tagName: "script", innerHTML: asset.source(), closeTag: true };
    }

    if (tag.tagName === "link") {
      const scriptName = publicPath
        ? tag.attributes.href.replace(publicPath, "")
        : tag.attributes.href;

      const asset = assets[scriptName];
      if (asset == null || asset.size() > maxSize) {
        return tag;
      }
      return { tagName: "style", innerHTML: asset.source(), closeTag: true };
    }
  }

  apply(compiler) {
    let publicPath = compiler.options.output.publicPath || "";
    if (publicPath && !publicPath.endsWith("/")) {
      publicPath += "/";
    }

    compiler.hooks.compilation.tap("InlineChunkHtmlPlugin", (compilation) => {
      const js = this.config.js;
      const css = this.config.css;

      const tagFunction = (tag) =>
        this.getInlinedTag(publicPath, compilation.assets, tag);

      const hooks = this.htmlWebpackPlugin.getHooks(compilation);
      hooks.alterAssetTagGroups.tap("InlineChunkHtmlPlugin", (assets) => {
        assets.headTags = assets.headTags.map(tagFunction);
        assets.bodyTags = assets.bodyTags.map(tagFunction);

        for (let i = 0; i < js.length; i++) {
          assets.bodyTags.unshift({
            tagName: "script",
            innerHTML: extractSource(js[i]),
            closeTag: true,
          });
        }
        for (let i = 0; i < css.length; i++) {
          assets.bodyTags.unshift({
            tagName: "style",
            innerHTML: extractSource(css[i]),
            closeTag: true,
          });
        }
      });
    });
  }
}

module.exports = InlineChunkHtmlPlugin;