Trying to change the delimiter from webpack HtmlWebpackPlugin or using a custom loader with no success

Question

I have been trying to change the delimiter of HtmlWebpackPlugin ejs since I need to be able to output <%.

So things I have tried:

1. Using <%% gives an error of unexpected identifier.
2. It seems that I can't pass the delimiter as options to the default loader so using a custom loader gives the following: "To support the 'esModule' option, the 'variable' option must be passed to avoid 'with' statements"

here is my config

    const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const { data } = require("jquery");

module.exports = merge(common, {
  mode: "production",
  output: {
    filename: "[name].[contentHash].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin(),
      new TerserPlugin(),
      new HtmlWebpackPlugin({
        template: "./src/template.html",
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      }),
      new HtmlWebpackPlugin({
        title: 'Custom template',
        inject: false,
        filename: 'test.aspx',
              //     interpolate : '\\{\\{(.+?)\\}\\}',
      //     evaluate : '\\[\\[(.+?)\\]\\]'
        template: './src/templateasp.ejs',
        // template: '!!ejs-loader!./src/templateasp.ejs'
      }),
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }),
    new CleanWebpackPlugin(),
    new WebpackShellPlugin({onBuildStart:['node "./prov/lists.build.node.mjs"'], onBuildEnd:['echo "Webpack End"']}),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, //3. Extract css into files
          "css-loader", //2. Turns css into commonjs
          "sass-loader" //1. Turns sass into css
        ]
      },
      // {
      //   test: /\.ejs$/,
      //   loader: 'ejs-loader',
      //   options: {
      //     variable: 'data',
      //     interpolate : '\\{\\{(.+?)\\}\\}',
      //     evaluate : '\\[\\[(.+?)\\]\\]'
      //   }
      // }
    ]
  }
});

most of it copied from freecodecamp wp course

Any ideas what I can do to deal with this issue? I just need to be able to output a aspx file which has "<%-- " and "<%@" on it. the rest I can handle with the sample file they have to put the assets in the right place.

Answer 1

I figured it out. You need to do the following:

ex1:

<%= '\<%-- _lcid="1033" _version="16.0.20113" _dal="1" --%\>' %>

ex2

<%= '\<%-- _LocalBinding --%\>' %>

ex3

<%= 'string text, use backslash to escape the delimiter as in \<% or %\>' %>