javascript - 错误 : while using devtool ="source-map" option in webpack config version 5

Question

我在 webpack 配置中使用“source-map”作为 devtool 选项的值时出现此错误，但在使用“eval”时它有效(但我不想要“eval”)。 Assets 可能未定义或不是数组。我是 webpack 的新手，任何人都可以帮我提出建议，比如这里的可能性是什么？

sourceMap = /** @type {SourceMap} */ (asset.map(options));
                                                                ^
    
    TypeError: asset.map is not a function
        at getTaskForFile (/Users/Desktop/lib-webpack/node_modules/webpack/lib/SourceMapDevToolPlugin.js:82:47)
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/SourceMapDevToolPlugin.js:269:22
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/Cache.js:91:34
        at Array.<anonymous> (/Users/Desktop/lib-webpack/node_modules/webpack/lib/cache/MemoryCachePlugin.js:45:13)
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/Cache.js:91:19
        at Hook.eval [as callAsync] (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:17:1)
        at Cache.get (/Users/Desktop/lib-webpack/node_modules/webpack/lib/Cache.js:75:18)
        at ItemCacheFacade.get (/Users/Desktop/lib-webpack/node_modules/webpack/lib/CacheFacade.js:117:15)
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/SourceMapDevToolPlugin.js:220:18
        at arrayEach (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/neo-async/async.js:2405:9)
        at Object.each (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/neo-async/async.js:2846:9)
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/SourceMapDevToolPlugin.js:204:15
        at fn (/Users/Desktop/lib-webpack/node_modules/webpack/lib/Compilation.js:404:9)
        at _next1 (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:19:1)
        at eval (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:33:1)
        at eval (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
        at /Users/Desktop/lib-webpack/node_modules/webpack/lib/Compilation.js:397:10
        at Hook.eval [as callAsync] (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:5:1)
        at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
        at fn (/Users/Desktop/lib-webpack/node_modules/webpack/lib/Compilation.js:381:45)
        at _next0 (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:29:1)
        at eval (eval at create (/Users/Desktop/lib-webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)

Answer 1

这是因为我使用了不正确的资源对象格式，我需要稍后修改 block ，因为我使用了 css 的白色标签。

早期的 webpack 4 =>

assets[filename] = {
    source: function() {
        return result.css;
    },
    size: function() {
        return result.css.length;
    },
};

早期的 webpack 5 =>

assets[filename] = new webpack.sources.RawSource(result.css.toString());