错误：在 webpack 配置版本 5 中使用 devtool="source-map" 选项时

问题描述

我在 webpack 配置中使用“source-map”作为 devtool 选项的值时收到此错误，但在使用“eval”时它可以工作（但我不想要“eval”）。资产可能未定义或不是数组。我是 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)

解决方法

这是因为我使用了错误的资产源对象格式，我需要稍后修改块，因为我使用了css的白色标签。

早在 webpack 4 =>

""

早在 webpack 5 =>

.toolbar {
 ToolbarItem(placement: .primary) {
    if self.addingItems {
       Button("Done",action: submitItems)
    } else {
       EditButton()
    }
 }
}

javascript webpack webpack webpack webpack-5 webpack-config