时间戳

首页 > 解决方案 > 错误：在 webpack 配置版本 5 中使用 devtool="source-map" 选项时

javascript - 错误：在 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)

标签： javascriptwebpackwebpack-5webpack-config

解决方案

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

推荐阅读