如何更改 webpack 模块导出需要字符串？答案

【问题标题】：How to change webpack module export require string?如何更改 webpack 模块导出需要字符串？
【发布时间】：2020-03-02 15:26:51
【问题描述】：

例如，当使用 webpack 创建 bundle 时，它会输出 angular 如下。

/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");

但我想要的输出是这样的：

/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "@angular/core");

网上说要改resolve.alias，但我的理解是，如果我改resolve.alias，这次就找不到我使用的模块的路径了。

我不是很受 webpack 支配，但我确信这个问题有解决方案。有什么解决办法吗？

const path = require('path');

module.exports = {
    resolve: {
        alias: {
          //I'm stuck there
        }
    }
};

更新

这个问题恰好出现在以下场景中，例如C模块使用X库。同时，这个C模块在A模块的子A模块下打开。模块 A 和 C 在 2 个不同的项目上编译。我将 X 库捆绑在 模块 A 中。我没有将 X 模块 捆绑在 C 模块中。因为我知道在module A中，这个module X是捆绑的。但是，C 模块开发人员从“D:\X-Library”文件路径获取 X Module 引用，而 A 模块开发人员从“D:\Libraries\X-Library”文件路径。通过这些引用，Webpack 从包中调用 X 模块。最后，在A模块里面打开C模块，想使用X模块时，请求“D:\X-Library”为_webpack_require(” D:\X-Library"）。但是，模块 X 被模块 A 注册为 _webpack_require（“D:\Librarires\X-Library”）。这就是为什么它不起作用。我希望我可以，A 模块 的孩子。模块 A 和 C 在 2 个不同的项目上编译。我将 X 库 捆绑在模块 A 中。我没有将 X 模块捆绑在 C 模块中。因为我知道在模块 A 中，这个模块 X 是捆绑的。但是，C 模块开发者从“D:\X-Library”文件路径获取 X 模块引用，而 A 模块开发者从“D:\库\X-Library”文件路径。通过这些引用，Webpack 从包中调用 X 模块。最后，当C模块在A模块内部打开，当它想使用X模块时，它请求"D:\X-Library" as _webpack_require("D:\X -图书馆”）。但是，模块 X 被模块 A 注册为 _webpack_require（“D:\Librarires\X-Library”）。这就是为什么它不起作用。我希望我能。

【问题讨论】：

请问您为什么要更改这些名称？
我正在尝试将我在两个不同项目中的预构建模块合并到一个项目中。但是，当它们位于计算机上的不同目录中时，它们使用的库不起作用。它在同一目录中时有效。作为解决这个问题的办法，我想在这里配置一下。 @PetrAveryanov
我建议在构建步骤中将此 X 依赖项提取为 DLL 包。从来没有自己尝试过，但这可能会对你有所帮助：webpack.js.org/plugins/dll-plugin medium.com/@emilycoco/…

标签： javascript angular webpack angular-builder

【解决方案1】：

对于 Angular 8.3.5 版本，我通过向 webpack 编写插件得到了解决方案。

在 Compliation Hooks 中，模块 ID 优化后，如果我更改 ID，我可以在创建包之前将其转换为我想要的格式。

module.exports = class ChangeRequireStringPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.compilation.tap('ChangeRequireStringPlugin', compilation => {
            compilation.hooks.afterOptimizeModuleIds.tap('ChangeRequireStringPlugin', (modules) => {
                for (let i = 0; i < this.options.length; i++) {
                    let module = modules.find(s => s.id == this.options[i].path)
                    if (module) {
                        module.id = this.options[i].to;
                    }
                }
            });
        });
    }
};

和 webpack.config.js

const path = require('path');
const ChangeRequireStringPlugin = require("./ChangeRequireStringPlugin/ChangeRequireStringPlugin");
module.exports = {
    plugins: [new ChangeRequireStringPlugin([
        {
            path: "./node_modules/@angular/core/fesm2015/core.js",
            to:"@angular/core"
        }
    ])]
};

这是最好的解决方案吗？我不确定，但他现在正在做我的工作。

Webpack 5 带有 after Runtime Requirements 选项。来的时候最好用钩子解决。https://webpack.js.org/api/compilation-hooks/#beforeruntimerequirements

我实现这个插件的示例项目：https://github.com/mcantonbul/Angular-Webpack-Change-Require-String

【讨论】：