search

jantimon / html-webpack-plugin

Simplifies creation of HTML files to serve your webpack bundles
MIT License
10.71k stars 1.31k forks source link

html-webpack-plugin translate `&` to `&` when use `&` in templateParameters #1794

Closed fireairforce closed 1 year ago

fireairforce commented 1 year ago

Current behaviour 💣

Please take a look at reproduction example.

The & will be translated to &.

Expected behaviour ☀️

I just want to keep the origin &.

Reproduction Example 👾

We can just use html-webpack-plugin/examples/template-parameters.

Update webpack.config.js: 

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      testUrl: 'https://test.com?a=1&b=2'
    })
  ],
}

And then use this parameter under template ejs file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= foo %></title>
    <link rel="stylesheet" href="<%-  testUrl %>" />
  </head>
  <body>
  </body>
</html>

Then execute webpack to build the project, you will found the output of the html will get testUrl like:

<link rel="stylesheet" href="https://test.com/test?a=1&amp;b=1"/>

Environment 🖥

node: v16.17.0 html-webpack-plugin: latest webpack: v5

fireairforce commented 1 year ago

It seems that html-webpack-plugin use lodash.escape to deal the parameter string:

2b2b4cd2-80f9-40e8-abab-b8e0c1b63c9b

But i use EJS's <-% %> synatax to avoid escape here.

alexander-akait commented 1 year ago

Can you provide your configuration for html-webpack-plugin?

fireairforce commented 1 year ago

@alexander-akait I just use the example of html-webpack-plugin/examples/template-parameters, the config as follows: 

var path = require('path');
var HtmlWebpackPlugin = require('../..');
var webpackMajorVersion = require('webpack/package.json').version.split('.')[0];
module.exports = {
  context: __dirname,
  entry: './example.js',
  output: {
    path: path.join(__dirname, 'dist/webpack-' + webpackMajorVersion),
    publicPath: '',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      // If you pass a plain object, it will be merged with the default values
      // (New in version 4)
      templateParameters: {
        'foo': 'bar',
        baseUrl: 'https://baidu.com/test?b=1&a=1<2333',
      },
      // Or if you want full control, pass a function
      // templateParameters: (compilation, assets, assetTags, options) => {
      //   return {
      //     compilation,
      //     webpackConfig: compilation.options,
      //     htmlWebpackPlugin: {
      //       tags: assetTags,
      //       files: assets,
      //       options
      //     },
      //     'foo': 'bar'
      //   };
      // },
      template: 'index.ejs'
    })
  ]
};
alexander-akait commented 1 year ago

Sounds like a bug, feel free to send a fix

fireairforce commented 1 year ago

Sorry i found this might not be html-webpack-plugin's bug, if i use <%= => here it will work fine.