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

【问题标题】：Error: while using devtool="source-map" option in webpack config version 5错误：在 webpack 配置版本 5 中使用 devtool="source-map" 选项时
【发布时间】：2021-04-04 17:55:35
【问题描述】：

我在使用“source-map”作为 webpack 配置中 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)

【问题讨论】：

谁能帮帮我，这里的资产指的是什么？

标签： javascript webpack webpack-5 webpack-config

【解决方案1】：

这是因为我使用了asset的源对象格式不正确，我需要稍后修改chunk，因为我使用的是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());

【讨论】：

webpack 在哪里 --> apply(compiler) { const { webpack } = compiler;