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

【问题标题】：html-webpack-plugin - How to insert webpack bundle.js without executing the EJS templatehtml-webpack-plugin - 如何在不执行 EJS 模板的情况下插入 webpack bundle.js
【发布时间】：2017-04-11 05:42:08
【问题描述】：

我试图在不执行 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'
            }),

模板.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>

【问题讨论】：

标签： node.js templates webpack ejs html-webpack-plugin

【解决方案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;

【讨论】：

【解决方案2】：

为什么不使用：

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

使用ejs-render-loader： https://github.com/tracker1/ejs-render-loader

【讨论】：