How to change webpack module export require string?

Question

When creating bundle with webpack, for example, it outputs angular as follows.

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

But I want output is like this:

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

It says on the internet that you need to change resolve.alias, but what I understand is that if I change resolve.alias, this time I can't find the path of the module I use.

I'm not very dominated by the webpack, but I'm sure there is a solution to this problem. Is there any solution available?

const path = require('path');

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

UPDATE

This problem occurs exactly in the following scenario, for example the C module uses the X library. At the same time, this C module is opened under the A module, the child of the A module. Modules A and C are compiled on 2 different projects. I bundle the X library inside module A. I don't bundle the X module inside the C module. Because I know that in module A, this module X is bundled. However, the C module developer gets the X Module reference from the "D: \ X-Library" file path, while the A module developer gets the X Module reference from the "D: \ Libraries \ X-Library" file path. And with these references, Webpack calls the X module from within the bundle. Finally, when the C module is opened inside the A module, when it wants to use the X module, it requests "D: \ X-Library" as _webpack_require ("D: \ X-Library"). However, the module X is registered by module A as _webpack_require ("D: \ Librarires \ X-Library"). That's why it doesn't work. I hope I can, the child of the A module. Modules A and C are compiled on 2 different projects. I bundle the X library inside module A. I don't bundle the X module inside the C module. Because I know that in module A, this module X is bundled. However, the C module developer gets the X Module reference from the "D: \ X-Library" file path, while the A module developer gets the X Module reference from the "D: \ Libraries \ X-Library" file path. And with these references, Webpack calls the X module from within the bundle. Finally, when the C module is opened inside the A module, when it wants to use the X module, it requests "D: \ X-Library" as _webpack_require ("D: \ X-Library"). However, the module X is registered by module A as _webpack_require ("D: \ Librarires \ X-Library"). That's why it doesn't work. I hope I can.

I'm trying to combine my pre-built modules in two different projects into a single project. However, the libraries they use do not work when they are in different directories on their computer. It works when it is in the same directory. As a solution to this problem, I want to configure it here. @PetrAveryanov — Muhammet Can TONBUL, Nov 06 '19 at 14:28
I would suggest to extract this X dependency as a DLL bundle during the build step. Never tried it by myself, but that would probably help you: https://webpack.js.org/plugins/dll-plugin/ https://medium.com/@emilycoco/how-to-use-the-dll-plugin-to-speed-up-your-webpack-build-dbf330d3b13c — agoldis, Nov 09 '19 at 05:41

Muhammet Can TONBUL · Answer 1 · 2019-11-21T05:31:04.083

For Angular version 8.3.5, I got a solution by writing a plugin to webpack.,

From within the Compliation Hooks, after the module ids have been optimized, if I change the id, I can convert it to the format I want before creating the bundle.

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;
                    }
                }
            });
        });
    }
};

and 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"
        }
    ])]
};

Is this the best solution? I'm not sure, but he's doing my job right now.

Webpack 5 comes with the after Runtime Requirements option. When it comes, it may be best to solve it with the hook.https://webpack.js.org/api/compilation-hooks/#beforeruntimerequirements

The sample project I implemented this plugin:https://github.com/mcantonbul/Angular-Webpack-Change-Require-String

How to change webpack module export require string?

1 Answers1