workbox-webpack-plugin 的 InjectManifest 仅适用于 `devtoolModuleFilenameTemplate: 'file:///[absolute-reso

Posted 2023-03-10

【中文标题】workbox-webpack-plugin 的 InjectManifest 仅适用于 `devtoolModuleFilenameTemplate: \'file:///[absolute-resource-path]\'`

【英文标题】：workbox-webpack-plugin's InjectManifest only works with `devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]'`workbox-webpack-plugin 的 InjectManifest 仅适用于 `devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]'`

【发布时间】：2021-07-07 15:41:39

【问题描述】：

我想使用workbox-webpack-plugin 来包含我自己的服务人员。但是，除非我使用输出选项devToolModuleFilenameTemplate，否则使用InjectManifest 不起作用。 似乎library: "[name]" 是与workbox-webpack-plugin 结合使用的失败配置。为什么我在使用library: "[name]"选项时必须设置devToolModuleFilenameTemplate？

重现错误的最小项目

https://gitlab.com/d.kuhnke/workbox-webpack-plugin-problem

NPM 依赖项

  "devDependencies": 
    "ts-loader": "^8.1.0",
    "webpack": "^5.31.2",
    "webpack-cli": "^4.6.0",
    "webpack-merge": "^5.7.3",
    "workbox-webpack-plugin": "^6.1.2"
  

配置失败 (webpack.common.js / webpack.prod.js)

const path = require('path');
const  InjectManifest  = require('workbox-webpack-plugin');

module.exports = 
    entry: 
        Test: './src/index.js'
    ,
    output: 
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        library: "[name]", // this is the line which makes problems
        clean: true,
    ,
    plugins: [
        new InjectManifest(
            swSrc: './src/test-offline-worker.js'
        ),
    ],
    watchOptions: 
        ignored: ['dist', '**/node_modules']
    ,
    mode: 'development',
    devtool: 'source-map', // production source map
;

工作配置 (webpack.dev.js)

const  merge  = require('webpack-merge');
const common = require('./webpack.common.js');

const path = require('path');

module.exports = merge(common, 
    output:  // InjectManifest only works with this setting
        devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]'  // map to source with absolute file path not webpack:// protocol
    ,
);

配置失败的错误信息

PS C:\Users\USERNAME\dev\git\personal\webpack-problem> npm run build:prod

> webpack-problem@1.0.0 build:prod
> webpack --config webpack.prod.js

asset Test.bundle.js 618 bytes [compared for emit] (name: Test) 1 related asset
asset test-offline-worker.js 300 bytes [emitted] 1 related asset
./src/index.js 1 bytes [built] [code generated]

ERROR in Invalid URL: webpack://[name]/./src/test-offline-worker.js

webpack 5.31.2 compiled with 1 error in 104 ms
npm ERR! code 1
npm ERR! path C:\Users\USERNAME\dev\git\personal\webpack-problem
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c webpack --config webpack.prod.js

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\USERNAME\scoop\persist\nodejs\cache\_logs\2021-04-12T14_28_43_806Z-debug.log

更新（2021-05-18）

正如 Jeff Posnick 解释的那样，问题是缺少替换占位符字符串 [name]。一个解决方案/解决方法是将output.devtoolNamespace 设置为一个常量值，如here 所述。

【问题讨论】：

道歉；我正在github.com/GoogleChrome/workbox/issues/2729

跟踪此问题以及一些相关问题

实际上，我已经重新审视了这一点，因为它似乎与 GitHub 问题中提到的其他一些问题不同。

【参考方案1】：

这里有几件事在起作用。

首先，output.library 设置为 '[name]' 时，webpack 的源映射生成器似乎无法正常工作，与 Workbox 无关：

如果您从“失败配置”示例中注释掉 InjectManifest 插件，那么它将生成一个源映射，其中包含：

"sources":["webpack://[name]/./src/index.js"], ...

我也不认为这是有效的。它不会触发编译错误，但它不是预期的输出。这将是向webpack 团队提出的问题。

其次，当您将InjectManifest 插件添加到产生库输出的编译中时，我想不出一个有效的用例。使用InjectManfest 创建的服务工作者应该预先缓存给定编译的输出，但同时，使用output.library 设置的编译的输出是一个可重用的库，其他人将从他们自己的库中提取代码库，即适合在npm 上发布的东西。将服务人员与该库或类似的东西一起运送是没有意义的。

【讨论】：

我们的 webpack 构建包含多个网站。这些库用于为网站打包必要的依赖项，并且仅在内部使用。一些网站需要缓存来支持不稳定的移动互联网连接。对于这些，我们使用InjectManifest 插件。但是，这些网站是最近才添加的，所以我们当前的 webpack 设置可能不再适用。

如果有需要缓存的网站，您应该将InjectManifest 插件添加到这些网站的编译中（可能会消耗您的library），而不是生成library 的编译输出。