将动态值插入输出文件

问题描述

上下文

我有一个 Service Worker 入口点，如下所示：

{
  entry: {
    serviceWorker: './src/serviceWorker.ts'
  }
}

还有其他入口点，但在本示例中，我只展示了 Service Worker 入口点。

我希望 Service Worker 的内容在任何输出文件更改时都会更改，以便浏览器能够检测到 Service Worker 的更改（并且可以更新以使用新版本）。为此，我可以使用 stats.hash。

我想做什么

使用 webpack 构建项目时，应该在输出文件的某个地方插入这样的内容：

/* hash: asdf70a89sd7f098as7d0f897a0 */

哈希将是 webpack 统计信息中的任何 hash。

解决方法

更新

我发现原来的插件有 a lot of issues 并且它不能在生产模式下工作。我发现了一个有效的内置 webpack 插件。

我使用 BannerPlugin 来做到这一点。

我将此插件添加到我的 webpack 配置中：

new BannerPlugin({
  banner: '/*@preserve [fullhash]*/',entryOnly: true,include: 'serviceWorker',raw: true
})

header 函数为 service worker 文件添加了一个带有哈希值的注释，并保留其他文件的原样。

为了在生产版本中包含注释，我使用了以下缩小选项：

new TerserPlugin({
  terserOptions: {
    format: {
      comments: /@preserve/i
    }
  },extractComments: /^\**!|@license|@cc_on/i
})

原答案

我使用 wrapper-webpack-plugin 来做到这一点。

我将此插件添加到我的 webpack 配置中：

new WrapperPlugin({
  header: (fileName,{ hash }) => {
    return fileName === 'serviceWorker.bundle.js' ? `/* hash: ${hash} */` : ''
  },afterOptimizations: true
})

header 函数为 service worker 文件添加了一个带有哈希值的注释，并保留其他文件的原样。