fix: multi-entry issue

runjuu#14

Author: runjuu

package.json

@@ -44,6 +44,7 @@
   },
   "homepage": "https://github.com/Runjuu/html-inline-css-webpack-plugin#readme",
   "devDependencies": {
+    "@types/lodash": "^4.14.137",
     "@types/webpack": "^4.4.0",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.0",
@@ -54,5 +55,8 @@
     "tslint-sonarts": "^1.8.0",
     "typescript": "^3.2.2",
     "webpack": "^4.11.1"
+  },
+  "dependencies": {
+    "lodash": "^4.17.15"
   }
 }

src/index.ts

@@ -1,4 +1,6 @@
-import { Compiler, Configuration } from 'webpack'
+import { SyncHook } from 'tapable'
+import { Compiler } from 'webpack'
+import { escapeRegExp } from 'lodash'
 
 interface File {
   [key: string]: string
@@ -13,6 +15,15 @@ interface Compilation {
   assets: { [key: string]: Asset }
 }
 
+interface HtmlWebpackPluginData {
+  html: string
+  outputName: string
+  assets: {
+    publicPath: string
+    css: string[]
+  }
+}
+
 interface ReplaceConfig {
   position?: 'before' | 'after'
   removeTarget?: boolean
@@ -59,10 +70,17 @@ export default class Plugin {
 
   private css: File = {}
 
-  private html: File = {}
-
   constructor(private readonly config: Config = {}) {}
 
+  private getCSSFile(cssLink: string, publicPath: string) {
+    // Link pattern: publicPath + fileName + '?' + hash
+    const fileName = cssLink
+      .replace(new RegExp(`^${escapeRegExp(publicPath)}`), '')
+      .replace(/\?.+$/g, '')
+
+    return this.css[fileName]
+  }
+
   private isCurrentFileNeedsToBeInlined(fileName: string): boolean {
     if (typeof this.config.filter === 'function') {
       return this.config.filter(fileName)
@@ -73,55 +91,55 @@ export default class Plugin {
 
   private prepare({ assets }: Compilation) {
     const isCSS = is('css')
-    const isHTML = is('html')
-    const { leaveCSSFile } = this.config
 
     Object.keys(assets).forEach((fileName) => {
       if (isCSS(fileName) && this.isCurrentFileNeedsToBeInlined(fileName)) {
         this.css[fileName] = assets[fileName].source()
-        if (!leaveCSSFile) {
+        if (!this.config.leaveCSSFile) {
           delete assets[fileName]
         }
       }
-
-      if (isHTML(fileName) && this.isCurrentFileNeedsToBeInlined(fileName)) {
-        this.html[fileName] = assets[fileName].source()
-      }
     })
   }
 
-  private process({ assets }: Compilation, { output }: Configuration) {
-    const publicPath = (output && output.publicPath) || ''
+  private process(data: HtmlWebpackPluginData) {
     const { replace: replaceConfig = DEFAULT_REPLACE_CONFIG } = this.config
 
-    Object.keys(this.html).forEach((htmlFileName) => {
-      let html = this.html[htmlFileName]
-
-      Object.keys(this.css).forEach((key) => {
-        html = Plugin.addStyle(html, this.css[key], replaceConfig)
-        html = Plugin.removeLinkTag(html, publicPath + key)
+    // check if current html needs to be inlined
+    if (this.isCurrentFileNeedsToBeInlined(data.outputName)) {
+      data.assets.css.forEach((cssLink) => {
+        data.html = Plugin.addStyle(
+          data.html,
+          this.getCSSFile(cssLink, data.assets.publicPath),
+          replaceConfig,
+        )
       })
 
-      html = Plugin.cleanUp(html, replaceConfig)
-
-      assets[htmlFileName] = {
-        source() {
-          return html
-        },
-        size() {
-          return html.length
-        },
-      }
-    })
+      data.html = Plugin.cleanUp(data.html, replaceConfig)
+      data.assets.css.length = 0 // prevent generate <link /> tag
+    }
   }
 
   apply(compiler: Compiler) {
-    compiler.hooks.emit.tapAsync(
+    compiler.hooks.compilation.tap(
       'html-inline-css-webpack-plugin',
-      (compilation: Compilation, callback: () => void) => {
-        this.prepare(compilation)
-        this.process(compilation, compiler.options)
-        callback()
+      (compilation) => {
+        if ('htmlWebpackPluginBeforeHtmlProcessing' in compilation.hooks) {
+          const hook: SyncHook<HtmlWebpackPluginData> =
+            // @ts-ignore Error:(130, 27) TS2339: Property 'htmlWebpackPluginBeforeHtmlProcessing' does not exist on type 'CompilationHooks'.
+            compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing
+          hook.tap(
+            'html-inline-css-webpack-plugin-html-webpack-plugin-before-html-processing',
+            (data: HtmlWebpackPluginData) => {
+              this.prepare(compilation)
+              this.process(data)
+            },
+          )
+        } else {
+          throw new Error(
+            '`html-webpack-plugin` should be ordered first before html-inline-css-webpack-plugin',
+          )
+        }
       },
     )
   }

yarn.lock

@@ -23,6 +23,11 @@
   dependencies:
     any-observable "^0.3.0"
 
+"@types/lodash@^4.14.137":
+  version "4.14.137"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.137.tgz#8a4804937dc6462274ffcc088df8f14fc1b368e2"
+  integrity sha512-g4rNK5SRKloO+sUGbuO7aPtwbwzMgjK+bm9BBhLD7jGUiGR7zhwYEhSln/ihgYQBeIJ5j7xjyaYzrWTcu3UotQ==
+
 "@types/node@*":
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.3.1.tgz#51092fbacaed768a122a293814474fbf6e5e8b6d"
@@ -1763,6 +1768,11 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+lodash@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+
 lodash@^4.17.5:
   version "4.17.14"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"