File:///[absolute-resource-path]‘`-webpack插件的InjectManifest只能与` `devtoolModuleFilenameTemplate：’`devtoolModuleFilenameTemplate一起使用

Question

我想使用workbox-webpack-plugin来包含我自己的服务工作者。但是，除非我使用输出选项devToolModuleFilenameTemplate，否则使用InjectManifest是不起作用的。与workbox-webpack-plugin结合使用时，library: "[name]"似乎是失败的配置。为什么在使用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上发布的库。把一个服务人员放在库旁边是没有意义的，或者类似的事情。