html-webpack-plugin

Question

我试图在不执行 EJS 模板的情况下动态插入 bundle.js，但出现以下错误。有没有办法只插入 JS 而不执行 EJS 模板？

ERROR in Template execution failed: ReferenceError: description is not defined

ERROR in   ReferenceError: description is not defined

我实际上是在使用节点渲染模板，我只想将捆绑文件动态插入 template.ejs

 res.status(200).render('template', 
{                                    
description: description,
title:title
});

webpack 配置：

  output: {
        path: path.join(__dirname, 'dist'),
        filename: "output.[hash].bundle.js",
        publicPath: '/'
    },
    new HtmlWebpackPlugin({
                inject: 'body',
                template: 'views/template.ejs'
            }),

template.ejs

<!DOCTYPE html>
<html lang="en" class="ddhub-site">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta description=<%=description%>/>
    <title> <%= title %> </title>
</head>
<body></body>
</html>

Answer 1

我最终使用了一个简单的自定义插件，其中包含在 github 问题之一上发布的信息。

var fs = require("fs");
const path = require('path')

function UpdateBundleJsPlugin(options) {
    // Setup the plugin instance with options...
}

UpdateBundleJsPlugin.prototype.apply = function(compiler) {
    compiler.plugin("done", function(statsData) {
        const stats = statsData.toJson();

        if (!stats.errors.length) {
            const htmlFileName = "search.ejs";
            const html = fs.readFileSync(path.join('./views',htmlFileName), "utf8");

            // need to read the final js bundle file to replace in the distributed index.html file
            const asset = stats.assets[0];
            let htmlOutput = html.replace(/static\/.*bundle\.js/, 'static/'+asset.name);

            fs.writeFileSync(
                path.join('./views', htmlFileName),
                htmlOutput);
        }
    });
};

module.exports = UpdateBundleJsPlugin;

Answer 2

为什么不使用：

plugins: [
new HtmlWebpackPlugin({
    hash: true,
    template: 'ejs-render!./dev/index.ejs',
    inject: 'body'
  })
]

随着ejs-render-loader： https://github.com/tracker1/ejs-render-loader

html-webpack-plugin - 如何在不执行 EJS 模板的情况下插入 webpack bundle.js

html-webpack-plugin - How to insert webpack bundle.js without executing the EJS template

templates

ejs

node.js

webpack