如何获取EJS文件[WEBPACK]中的JSON内容

Question

我想从外部 JSON 文件获取值 并在我的 中使用这些值EJS文件被webpack编译为HTML.

我的 JSON 和 EJS 工作正常。

我在我的 EJS 中尝试类似的事情:

<%=
require('./components/products.json')
%>

但是我在渲染中得到的唯一输出（在 HTML 文件中）是：

"components/products.json"

我尝试使用 Fetch，但在捆绑时 Webpack 无法识别它。并且还尝试将其传递给变量但结果相同。

objective是为了显示图片的URL包含在JSON要求将它们作为图像的 src 在 EJS 文件中。

Answer 1

终于，我找到了一个合适的解决方案。对于未来会来这里的人：

一切都发生在webpack.config.js

---

设置：

1) 第一次我需要我的 JSON 文件 :

const productsJson = require('.src/components/products.json')

2) 然后我在我的插件数组中添加以下代码：

new HtmlWebpackPlugin({
    template: './src/index.ejs',
    templateParameters: {
        'myJSON': productsJSON
    }
})

3) 最后，在index.ejs不需要require文件，它已经被webpack.config.js加载了。要显示 JSON 内容，您只需执行以下行：

<%= myJson.anything_In_My_Json %>