尝试从 webpack HtmlWebpackPlugin 更改分隔符或使用自定义加载器但没有成功

Question

我一直在尝试更改 HtmlWebpackPlugin ejs 的分隔符，因为我需要能够输出 <%.

所以我尝试过的东西：

使用 <%% 给出意外标识符的错误。
我似乎无法将分隔符作为选项传递给默认加载器，因此使用自定义加载器会给出以下结果：“要支持 'esModule' 选项，'variable' 选项必须是传递以避免 'with' 语句

这是我的配置

    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 : '\[\[(.+?)\]\]'
      //   }
      // }
    ]
  }
});

其中大部分复制自 freecodecamp wp course

有什么办法可以解决这个问题吗？我只需要能够输出一个带有“<%--”和“<%@”的 aspx 文件。剩下的我可以用示例文件处理，他们必须将资产放在正确的位置。

Answer 1

我明白了。您需要执行以下操作：

ex1:

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

ex2

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

ex3

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

尝试从 webpack HtmlWebpackPlugin 更改分隔符或使用自定义加载器但没有成功

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

ejs

webpack

html-webpack-plugin