For loop EJS&x2B；htmlWebpackPlugin+；ejs编译加载程序。Can'；t使用循环生成导航列表，获取类型错误_For Loop_Webpack_Ejs_Html Webpack Plugin

For loop EJS&x2B；htmlWebpackPlugin+；ejs编译加载程序。Can'；t使用循环生成导航列表，获取类型错误

for-loop webpack

For loop EJS&x2B；htmlWebpackPlugin+；ejs编译加载程序。Can'；t使用循环生成导航列表，获取类型错误,for-loop,webpack,ejs,html-webpack-plugin,For Loop,Webpack,Ejs,Html Webpack Plugin,我的目标是从传递到htmlWebpackPlugin选项的数据创建导航，我想使用for循环创建导航。每次尝试时，我都会遇到一些错误，例如无法读取未定义的属性“length”。另外，我使用ejs编译加载程序，因为我需要使用。我不使用express（如果没有其他方法，我会使用它） index.ejs：  <!doctype html> <html lang="en"> <head> <meta char

我的目标是从传递到

htmlWebpackPlugin

选项的数据创建导航，我想使用

for

循环创建导航。每次尝试时，我都会遇到一些错误，例如

无法读取未定义的属性“length”

。另外，我使用

ejs编译加载程序

，因为我需要使用

。我不使用

express

（如果没有其他方法，我会使用它）

index.ejs：

<!-- index.ejs -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

<%- include app/templates/header %>

</body>
</html>

我做错了什么？如果

ejs编译加载程序

无法访问传递的参数，那么有哪些易于维护的替代方案？

这是我在这里问的第一个问题，请不要判断太严格。提前谢谢。

我刚刚遇到了类似的情况，我的项目是因为使用了Webpack4。我在

编译ejs加载程序方面运气更好
我还没有尝试为模板传递一个对象，我所需要的只是ejs包含支持
 以下是问题作者的代码（该版本中“解决”了下面的所有内容），并指出它解决了问题。其版权归2018年Alex Naidovich所有，并拥有CC BY-SA 4.0许可证
nav.js:
module.exports=[
{
href:'./'，
标题：“家”
}, {
href:“./about.html”，
标题：“关于我们”
}, {
href:“./contact.html”，
标题：“联系我们”
}
]

webpack.config.js:
const NAV=require（'path/to/NAV.js'）；//无延伸
module.exports={
// ...
插件：{
// ...
新HtmlWebpackPlugin({
模板：'！！ejs编译加载程序！/index.ejs'，
文件名：“index.html”，
标题：appHtmlTitle，
导航：导航//
我已经解决了这个问题，而且我尝试过的方法更简单。如果你感兴趣，我可以展示一些东西。是的，我很高兴听到你是如何解决的。谢谢。我已经编辑了这个问题，并给出了解决方法。如果你仍然对此感兴趣，希望它能有所帮助：）AlexNaidovich，最好将这里的答案列为您的作者。正如我在前面的评论中提到的，如果您使用该代码添加自己的答案，我很乐意删除我刚才添加的社区wiki答案。如果您这样做，请ping我。
<!-- header.ejs -->
<div class="header">

  <div class="header-inner">

    <div class="header-logo"><img src="../../assets/images/logo.png" alt="Logo"></div>

    <div class="nav">
      <ul>
        <% for (var i = 0; i < htmlWebpackPlugin.options.navItems.length; i++) { %>

          <li><a href="<%= htmlWebpackPlugin.options.navItems[i].href %>">
            <%= htmlWebpackPlugin.options.navItems[i].title %>
          </a></li>

        <% } %>
      </ul>
    </div>

  </div>

</div>

module.exports = {
    // ...
    plugins: [
        new webpack.DefinePlugin({
            IS_DEV: IS_DEV
        }),

        new HtmlWebpackPlugin({
            template: '!!ejs-compiled-loader!./index.ejs',
            title: appHtmlTitle
        }),

        // HEADER
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'app/templates/header.ejs'),
        //  template: '!!ejs-compiled-loader!./app/templates/header.ejs' tried as well
            navItems: [
              {
                href: './',
                title: 'startseite'
              },
              {
                href: './offers.html',
                title: 'angebote'
              },
              {
                href: './about.html',
                title: '&uuml;ber uns'
              },
              {
                href: './contact.html',
                title: 'kontakt'
              }
            ],
            test: 'Test'
        })
    ],
    module: {
        rules: [
            // BABEL
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,
                options: {
                    compact: true
                }
            },

            // STYLES
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: IS_DEV
                        }
                    },
                ]
            },

            // CSS / SASS
            {
                test: /\.scss/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: IS_DEV
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: IS_DEV,
                            includePaths: [dirAssets]
                        }
                    }
                ]
            },

            // IMAGES
            {
                test: /\.(jpe?g|png|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]'
                }
            }
        ]
    }
};