jantimon/html-webpack-plugin

Writing Your Own Templates section does not work

einazare opened this issue · 2 comments

einazare commented

Current behaviour 💣

I am trying to use the templateParameters to pass some variables into my template and it does not work.
I have followed the examples shown:

Expected behaviour ☀️

I would like my <%= title %> to be replaced with the actual value of my templateParameters.title value, i.e. value located inside locales/de-DE.json or locales/en-GB.json.
I've also tried to modify the <%= title %> to <%= htmlWebpackPlugin.options.templateParameters.title %>.

Reproduction Example 👾

I have created a small repository to reproduce this issue here: https://github.com/einazare/html-webpack-plugin-18n-generator
You will need to:

  1. Install the dependencies with npm install
  2. Build the application with npm run build
  3. Open dist/index.html
  4. You will see <%= title %> was not replaced by Some title written in English (Great Britain)

Environment 🖥

All the versions from my package.json file here:

  "dependencies": {
    "copy-webpack-plugin": "11.0.0",
    "html-webpack-plugin": "5.5.0",
    "webpack": "5.88.2",
    "webpack-cli": "4.9.2",
    "webpack-dev-server": "4.8.1"
  },
  "devDependencies": {
    "css-loader": "6.7.1",
    "html-loader": "4.2.0",
    "style-loader": "3.3.1"
  }

Also, the output of the above commands here:

node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
Node.js v18.16.0
darwin 22.6.0

npm --version
9.5.1

npm ls webpack
html-webpack-plugin-18n-generator@1.0.0 /Users/einazare/Desktop/html-webpack-plugin-18n-generator
├─┬ copy-webpack-plugin@11.0.0
│ └── webpack@5.88.2 deduped
├─┬ css-loader@6.7.1
│ └── webpack@5.88.2 deduped
├─┬ html-loader@4.2.0
│ └── webpack@5.88.2 deduped
├─┬ html-webpack-plugin@5.5.0
│ └── webpack@5.88.2 deduped
├─┬ style-loader@3.3.1
│ └── webpack@5.88.2 deduped
├─┬ webpack-cli@4.9.2
│ ├─┬ @webpack-cli/configtest@1.2.0
│ │ └── webpack@5.88.2 deduped
│ └── webpack@5.88.2 deduped
├─┬ webpack-dev-server@4.8.1
│ ├─┬ webpack-dev-middleware@5.3.3
│ │ └── webpack@5.88.2 deduped
│ └── webpack@5.88.2 deduped
└─┬ webpack@5.88.2
  └─┬ terser-webpack-plugin@5.3.9
    └── webpack@5.88.2 deduped

npm ls html-webpack-plugin
html-webpack-plugin-18n-generator@1.0.0 /Users/einazare/Desktop/html-webpack-plugin-18n-generator
└── html-webpack-plugin@5.5.0

Thank you 🙏

einazare commented

I've managed to partially solve the issue by removing from my webpack.config.js the following code:

        {
          test: /\.html$/,
          use: ["html-loader"]
        },

But the <%= title %> from my .js file is still not being replaced with the templateParameter.

Also, another issue, is that, if I remove the rule for html-loader the favicon is not bundled anymore 😢 .

KaranLala commented

I just faced this same issue. Looking at the link below, it says "However this also means that in the following example webpack will use the html loader for your template. This will cause html minification and it will also disable the ejs/lodash fallback loader."

So I would assume that the ejs/lodash loader is required to set the templateParameters? Which explains why disabling the html-loader is working in your case. To bundle the favicon, you can use the favicon option in html-webpack-plugin?

https://github.com/jantimon/html-webpack-plugin/blob/main/docs/template-option.md

Edit:

There seems to be a way to run both html-loader and ejs loader if needed: https://stackoverflow.com/questions/56726509/webpack-chaining-loaders/61795641#61795641