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

Question

我想使用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 所述。

Answer 1

这里有几件事在起作用。

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

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

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

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

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