Webpack DefinePlugin未在输出中替换文本

Question

Webpack DefinePlugin未在输出中替换文本

3

我在尝试使用webpack的DefinePlugin时遇到了困难。也就是说，npx webpack命令可以正常运行，但是输出的js文件中未替换定义的token。以下是我最简单的（非）工作示例：

const webpack = require('webpack');

module.exports = {
    // bundling mode
    mode: "development",
    devtool: 'source-map',

    // input file
    entry: "./Index.ts",

    // loaders (e.g. run tsc on *.tsx?)
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: "ts-loader",
                }
            },
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            DUMMYVARIABLE: JSON.stringify('helloworld'),
        })
    ],
}

Index.ts

var DUMMYVARIABLE: string;

export class IndexModel {
    public static GetDummyVariable(): string {
        return DUMMYVARIABLE;
    }
}

输出的js文件（请注意，DUMMYVARIABLE仍然存在，而不是像预期的那样被'helloworld'替换）：

/******/ (() => { // webpackBootstrap
/******/    "use strict";
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it uses a non-standard name for the exports (exports).
(() => {
var exports = __webpack_exports__;
/*!******************!*\
  !*** ./Index.ts ***!
  \******************/

exports.__esModule = true;
exports.IndexModel = void 0;
var DUMMYVARIABLE;
var IndexModel = /** @class */ (function () {
    function IndexModel() {
    }
    IndexModel.GetDummyVariable = function () {
        return DUMMYVARIABLE;
    };
    return IndexModel;
}());
exports.IndexModel = IndexModel;

})();

/******/ })()
;
//# sourceMappingURL=main.js.map

据我了解，拥有一个名为tsconfig.json的文件至关重要，但其内容并不那么重要-目前我只在里面放了{}。

能否有人帮助我理解我做错了什么以及如何让DefinePlugin适用于我？

希望您能原谅我作为一名新手对webpack的陌生，之前我一直把webpack当作一个黑盒子来使用。

- Zeph

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mirco S. · Accepted Answer

Webpack不能将DUMMYVARIABLE变量替换为"helloworld"，因为你没有将其定义为全局变量，而是作为局部变量。为使你的示例起作用，你需要删除var DUMMYVARIABLE;声明，因为脚本中的出现使得Webpack认为DUMMYVARIABLE是一个局部变量。此外，为防止TypeScript中的类型错误，你还应该使用declare告诉TypeScript，DUMMYVARIABLE是全局变量：

declare var DUMMYVARIABLE: string;

export class IndexModel {
    public static GetDummyVariable(): string {
        return DUMMYVARIABLE;
    }
}

现在 webpack.DefinePlugin 将会替换掉如下的出现:

var IndexModel = /** @class */ (function () {
    function IndexModel() {
    }
    IndexModel.GetDummyVariable = function () {
        return "helloworld";
    };
    return IndexModel;
}());