fix "Passing individual values" issue

README.md

@@ -168,29 +168,35 @@ module.exports = {
 
 ## <a name="passing-individual-values"></a> Passing individual values
 
+> If you are getting all your `htmlWebpackPlugin` instances generated within a loop, and you want to get indivisual passing values for each `.ejs` template as variables, you can try this. (This method is using webapck loader inline mechanic to load every `ejs` file instead, you can also set html-loader/template-ejs-Loader options for each `.ejs` file.)
+
 `webpack.config.js`
 
 ```javascript
+const { htmlWebpackPluginTemplateCustomizer }  = require('template-ejs-loader')
+...
 module.exports = {
-  ~~~
+  ...
 
   plugins: [
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: `!${require.resolve('html-loader')}??ruleSet[1].rules[0].use[0]!${path.resolve(
-        __dirname,
-        '../lib/index.js'
-      )}?${queryString.stringify({
-        // Use the query as an option to pass to the loader
-        root: './src/ejs',
-        data: JSON.stringify({
-          foo: 'bar',
-        }),
-      })}!${path.resolve(__dirname, './src/ejs/index.ejs')}`,
+      template: htmlWebpackPluginTemplateCustomizer({
+        htmlLoaderOption:{
+          ... // set individual html-loader option here
+        },
+        templateEjsLoaderOption:{
+          root:'' // set individual template-ejs-loader option here
+          data:{
+            foo:'test' // you can have indivisual data injection for each .ejs file, too. 
+          }
+        },
+        templatePath:'./src/index.ejs' // ejs template path 
+      }),
     }),
   ]
 
-  ~~~
+  ...
 }
 ```
 

src/index.ts

@@ -1,6 +1,5 @@
 import { readFileSync } from 'fs'
 import { resolve, dirname } from 'path'
-
 import { compile, Options, Data } from 'ejs'
 import { LoaderContext } from 'webpack'
 
@@ -88,9 +87,47 @@ const resolveRequirePaths = async (context: EjsLoaderContext, content: string) =
 
   return resultContent
 }
+// Since Node.js had marked the querystring as legacy API in version 14.x, and recommended using URLSearchParams,
+// we should migrate from "querystring" to "URLSearchParams" if we want to get URL query string here.
+// check this: https://www.linkedin.com/pulse/how-migrate-from-querystring-urlsearchparams-nodejs-vladim%C3%ADr-gorej?trk=articles_directory
+const obj2URLQueryString = (config?:{[prop: string]: any })=>{
+  if(!config)return''
+  let optionArr:string[][] = []
+  Object.keys(config).forEach((key)=>{
+    const optionItem = [key,JSON.stringify(config[key])]
+    optionArr.push(optionItem)
+  })
+  return new URLSearchParams(optionArr).toString()
+}
+
+export type htmlWebpackPluginTemplateCustomizerConfig = {
+  htmlLoaderOption? :{
+    [key: string]: any
+  },
+  templateEjsLoaderOption?: Options & { data?: Data | string }
+  templatePath?:string
+}
 
 export type { SourceMap, AdditionalData }
 
+export function htmlWebpackPluginTemplateCustomizer(config:htmlWebpackPluginTemplateCustomizerConfig){
+  const htmlLoader = `${require.resolve("html-loader")}` // get html-loader entry path
+  const templateEjsLoader = `${require.resolve("template-ejs-loader")}` // get template-ejs-loader entry path
+
+  let htmlLoaderOption = `${obj2URLQueryString(config.htmlLoaderOption)}` // get html-loader option
+  let templateEjsLoaderOption = `${obj2URLQueryString(config.templateEjsLoaderOption)}` // get template-ejs-loader option
+  // Check if option string is empty; (And if it's not, prepend a questionmark '?');
+  // This usage is about webpack loader inline, you can check the spec here : https://webpack.js.org/concepts/loaders/#inline
+  if(htmlLoaderOption){
+    htmlLoaderOption = `?${htmlLoaderOption}`;
+  }
+  if(templateEjsLoaderOption){
+    templateEjsLoaderOption = `?${templateEjsLoaderOption}`;
+  }
+  // combile loaders/loader options/templatePath then generate customized template name
+  return `!${htmlLoader}${htmlLoaderOption}!${templateEjsLoader}${templateEjsLoaderOption}!${config.templatePath}`
+}
+
 export default async function ejsLoader(
   this: EjsLoaderContext,
   content: string,