最终的 webpack 包总是将函数包装在 eval 中，而不管 "devtool: 'inline-source-map'"

Posted 2023-02-22

【中文标题】最终的 webpack 包总是将函数包装在 eval 中，而不管 "devtool: \'inline-source-map\'"

【英文标题】：Final webpack bundle always wraps functions inside eval irrespective of "devtool: 'inline-source-map'"最终的 webpack 包总是将函数包装在 eval 中，而不管 "devtool: 'inline-source-map'"

【发布时间】：2021-11-16 13:43:54

【问题描述】：

我在 webpack 中尝试了 devtool 的不同选项，无论选项集如何，它总是将我的组件包装在 eval 函数中。

package.json（我可以根据要求提供完整的 JSON）

"scripts": 
        "dev": "webpack -d --env dev --config ./webpack.dev.js && clientlib --verbose",
        "develop": "webpack -d --env dev --config ./webpack.dev.js",
        "prod": "webpack -p --config ./webpack.prod.js && clientlib --verbose",
        "start": "webpack-dev-server --open --config ./webpack.dev.js"
    ,

webpack.common.js

const path = require('path');
const webpack = require('webpack');
const COMMON_SRC_DIR = __dirname + '/common.src';

module.exports = 
    resolve: 
        extensions: ['.js', '.jsx']
    ,
    entry: 
        common: COMMON_SRC_DIR + '/index.js',
    ,
    output: 
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    ,
    module: 
        rules: [
                test: /\.(js|jsx)$/,
                use: 
                    loader: 'babel-loader',
                    options: 
                        presets: [
                            '@babel/react',
                            '@babel/preset-env'
                        ],
                        plugins: [
                            "@babel/plugin-proposal-class-properties",
                            "@babel/plugin-proposal-object-rest-spread"
                          ]
                    ,
                ,
            ,
        ]
    ,
    plugins: [
        new webpack.optimize.LimitChunkCountPlugin(
            maxChunks: 1
        ),
    ],
    stats: 
;

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, 
    mode: 'development',
    devtool: 'inline-source-map',
);
// I removed/commented out a lot of other options for debugging, but still, the generated bundle is being wrapped in the `eval` function.

预期的行为是什么？ 为devtool 设置不同的选项应该会生成不同的包。

其他相关信息： webpack 版本："^4.42.1" Node.js 版本：v14.17.3 操作系统：macOS Bug Sur

输出包的一部分

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\nvar commonComponents = ['SignIn', 'SearchBar', 'MiniCart', 'DropdownMenu', 'ProfileMegaMenu'];\n/* harmony default export */ __webpack_exports__[\"default\"] = (commonComponents);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9hcHAuY29uZmlnLmpzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vYXBwLmNvbmZpZy5qcz85NDg1Il0sInNvdXJjZXNDb250ZW50IjpbImNvbnN0IGNvbW1vbkNvbXBvbmVudHMgPSBbJ1NpZ25JbicsICdTZWFyY2hCYXInLCAnTWluaUNhcnQnLCAnRHJvcGRvd25NZW51JywgJ1Byb2ZpbGVNZWdhTWVudSddO1xuXG5leHBvcnQgZGVmYXVsdCBjb21tb25Db21wb25lbnRzO1xuIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUFBO0FBRUEiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./app.config.js\n");

【问题讨论】：

配置看起来不错。你介意设置一些东西让我们重现吗？

您好，感谢您的回复。我用最少的设置创建了一个 repo。它仍然将文件包装在 eval 中。开始怀疑它是否与添加到 package.json 的软件包之一有关。这里：github.com/thomsebastin/sample-wp-test

【参考方案1】：

我刚刚发现-d --env dev 选项将覆盖您的配置文件，这就是它可能使用默认devtool 模式的原因。

我认为你可以删除它，如果你热衷于使用 env 变量，你可以使用 webpack 的 env 插件：

// Remove this option `-d --env dev`

  "develop": "webpack --config ./webpack.dev.js",

【讨论】：

立即工作。谢谢你。我几乎没有运气就从 package.json 中删除了所有包。有时需要用全新的眼光来解决问题。

是的，这是事实:)