前端之家

  1. 首页
  2. 问答

如何更改Webpack模块导出要求字符串？

• 问答

例如，当使用webpack创建包时，它的输出角度如下。

/* 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，这一次我找不到我使用的模块的路径。 / p>

我不是很受webpack的支配，但是我确定有解决此问题的方法。有没有可用的解决方案？

const path = require('path');

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

更新

如何更改Webpack模块导出要求字符串？

在以下情况下确实会发生此问题，例如C模块使用 X库。同时，在 A模块（A模块的子代）下打开此C模块。模块A和C在两个不同的项目上编译。我将X库捆绑在模块A 中。我没有将 X模块捆绑在C模块中。因为我知道在模块A 中，此模块X 是捆绑在一起的。但是，C模块开发人员从“ D：\ X-library ”文件路径获取 X模块引用，而A模块开发人员从“ D：\库\ X库”文件路径。有了这些引用，Webpack从捆绑软件中调用X模块。最后，当在A模块中打开C模块时，当它想使用X模块时，它会请求 D：\ X-library 作为 _webpack_require （“ D：\ X库”）。但是，模块A将模块X注册为 _webpack_require （“ D：\ librarires \ X-library ”）。这就是为什么它不起作用。希望我能成为 A模块的孩子。模块A和C在两个不同的项目上编译。我将 X库捆绑在模块A中。没有将X模块捆绑在C模块中。因为我知道在模块A中，该模块X是捆绑在一起的。但是，C模块开发人员从“ D：\ X-library ”文件路径获取X模块引用，而A模块开发人员从“ D：\ D：\”获取X模块引用。库\ X-library ”文件路径。有了这些引用，Webpack从捆绑软件中调用X模块。最后，当在A模块中打开C模块时，当它想使用X模块时，它会要求_webpack_require（“ D：\ X-library ”（ D：\ X：X -库”）。但是，模块A将模块X注册为 _webpack_require （“ D：\ librarires \ X-library ”）。这就是为什么它不起作用。我希望可以。

comeonace 回答：如何更改Webpack模块导出要求字符串？

对于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附带“运行后需求”选项。遇到问题时，最好用钩子解决。https://webpack.js.org/api/compilation-hooks/#beforeruntimerequirements

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

angularangular-builderjavascriptwebpack
本文链接：https://www.f2er.com/3154201.html

大家都在问