NodeJS 将散列捆绑URL插入静态pug模板

dced5bon  于 2022-12-26  发布在  Node.js
关注(0)|答案(1)|浏览(610)

我使用Webpack pug-html-loader + file-loader来生成一堆静态pug模板。
我也想开始添加散列包文件名,但我不能解决如何插入散列文件名到我所有的pug模板
这是我目前在所有pug模板中引用我的bundle的方式:

script(src="bundle.js")
link(href="bundle.css")

我应该如何修改它来引用bundle-[chunkhash].js/bundle-[chunkhash].css]-我需要传递一些变量到webpack.config.js中的pug-html-loader吗?
注意:我使用extract-text-plugin将SASS输出到一个.css包文件

3duebb1j

3duebb1j1#

要将散列包文件名插入到静态pug模板中,需要将变量传递到webpack.config.js文件中的pug-html-loader。
首先,您需要设置您的Webpack配置,以便为您的软件包创建散列文件名。这可以通过使用Webpack插件NamedModulesPlugin并设置输出文件名以包含[chunkhash]占位符来完成。例如:

module.exports = {
  // other webpack config options...
  output: {
    filename: 'bundle-[chunkhash].js'
  },
  plugins: [new webpack.NamedModulesPlugin()]
}

一旦您的webpack配置被设置为创建bundle的散列文件名,您就可以使用pug-html-loader的选项将这些文件名传递给您的pug模板。在您的webpack.config.js文件中,您可以定义一个'data'对象,其中包含要传递给pug模板的文件名。例如:

module.exports = {
  // other webpack config options...
  module: {
    rules: [
      {
        test: /.pug$/,
        use: [
          {
            loader: 'pug-html-loader',
            options: {
              data: {
                jsFilename: 'bundle-[chunkhash].js',
                cssFilename: 'bundle-[chunkhash].css'
              }
            }
          }
        ]
      }
    ]
  }
}

然后,在pug模板中,您可以使用'- var'语法引用这些变量。例如:

script(src=jsFilename)
link(href=cssFilename)

这将允许您将散列包文件名插入到静态pug模板中。

相关问题