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

Question

我在 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 设置不同的选项应该会生成不同的包。

其他相关信息： 网络包版本："^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");

Answer 1

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

我想你可以删除它，如果你热衷于使用环境变量，你可以使用 env 插件 webpack:

// Remove this option `-d --env dev`
{
  "develop": "webpack --config ./webpack.dev.js",
}

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

Final webpack bundle always wraps functions inside eval irrespective of "devtool: 'inline-source-map'"

javascript

webpack

eval

bundling-and-minification