如何将 webpack 中动态生成的 bundlename 传递给节点渲染的 pug 文件答案

【问题标题】：How to pass Dynamically generated bundlename from webpack to a pug file which is being rendered by node如何将 webpack 中动态生成的 bundlename 传递给节点渲染的 pug 文件
【发布时间】：2021-04-29 05:47:15
【问题描述】：

我有一个 webpack 配置，它在公共文件夹中提供输出为 js/[name].[hash].bundle.js.

现在我想使用：

app.get('*', ,(req, res ) => {
  res.render( 'index' , {key: value} )
}

关于通过 Express 初始化应用程序。

我的index.pug 文件：

html
    head
        title SCAN
        link(rel='icon' href=`${reqURI}/favicon.ico`)
        // Container for React rendering
        #react-container
        div(id='one' data-token=token)
        script(src='/js/bundle.js', type='application/javascript')

如何将动态生成的包名传递给 Pug 文件？

【问题讨论】：

标签： node.js reactjs express pug

【解决方案1】：

您可以获取捆绑包的文件名并将其传递给 Pug 文件：

const fs = require('fs');

const bundleFileName = fs
  .readdirSync('./js/')
  .find((fileName) => fileName.endsWith('.bundle.js'));

console.log(bundleFileName); //=> e.g. "foo.1234.bundle.js"

app.get('*', (req, res) => {
  res.render('index', { key: value, bundleFileName })
}

在 Pug 文件中：

script(src=`/js/${bundleFileName}` type='application/javascript')

不确定是否有更好的方法。

【讨论】：