Can you set different aliases per entry file?

[Jakobud]

I have a unique situation where I have 2 different entry files that both use the same "alias" but each of those aliases need to point to different places for each entry file. In my case, it isn't an option to use 2 different alias names. The code uses a cascading/waterfall type of file resolution for the final product..... it's a long explanation but I just can't change the alias names.

Both entry files need to use the same alias "name" but each alias needs to point to different places. However from what I can tell aliases are unique per Webpack configuration.

Is it possible to have unique aliases per entry file?

[alexander-akait]

You can create loader and return different content based on your complex logic (look at issuer), alternative you can create plugin for resolver https://webpack.js.org/configuration/resolve/#resolveplugins, alternative you can try #12327, but I recommend to avoid this situations

[Jakobud]

Thanks. So I'm in the process of trying to see if a custom plugin would be doable for this. Never tried writing a plugin for Webpack. Do you know anything about how to use the ContextModuleFactory and NormalModuleFactory objects? Every single example I see they are doing compiler hooks like so:

class MyExampleWebpackPlugin {
  apply(compiler) {
    compiler.hooks.whatever.tap(.....)
...

So with NormalModuleFactory am I supposed to be doing this?

class MyExampleWebpackPlugin {
  apply(NormalModuleFactory) {
    NormalModuleFactory.hooks.whatever.tap(.....)
...

Because that doesn't seem to work. I don't see any examples in the documentation on how to set this up. I would expect some sort of example on the Plugin Patterns doc page but it only shows compiler hook examples.

[alexander-akait]

Simple example https://github.com/webpack/webpack/blob/master/lib/ExternalModuleFactoryPlugin.js, webpack has a lot of plugins side, so when you need something complex feel free to look at similar plugin logic

[sokra]

Actually aliases are not unique. They are part of the resolve options which can be different per module.

You can use module.rules to assign different aliases per module:

{
  test: /abc/,
  resolve: { alias: { ... } }
}

[Jakobud]

Oh really......... How did I miss this? This is exactly that I'm looking for. Thank you! Man I was spending all this time working on a custom plugin for this.

[Jakobud]

Wait maybe I spoke too soon on this... So in my situation I have 2 different "bundles" being created (one for websiteA and websiteB).

These bundles are created using a combination of code that is unique to each website and code that is common between the websites. Since the common code is processed once for each bundle, how would I set different aliases for each one? So here is a simplified example:

.
├── js/
│   ├── dog/
│   │   └── speak.js
│   ├── cat/
│   │   └── speak.js
│   └── main.js
└── output/
    ├── websiteDog/main.js
    └── websiteCat/main.js

entry files:

{
  "websiteDog/main": "js/main.js",
  "websiteCat/main": "js/main.js"
}

In my main.js I need to have something like this:

const speak  = require('animal/speak');
speak();

So when main.js is the entry file being processed for the dog website, I want the alias to be { "animal": "js/dog" } and when it's the entry file for the cat website I want the alias to be { "animal": "js/cat" }. The entire point is that I can have common code shared between multiple sites and have a single alias that is different depending on which site is being bundled up.

Okay so now looking at your module test idea, I don't think that would help me because I would only be testing for the file path/name, which would just be 'main.js' which is the same for both websites.

Does this make sense what I'm saying? I know it is a bit confusing and I think is maybe kind of a unique situation. The above dog/cat example is a super simplified version of my code.

Do you have any ideas on my best approach for this? Can I still do the test and resolve on the module-level somehow? I wish you could just set aliases for each entry file somehow.

[sokra]

If it's only a single module between the entry and the alias you could use main.js?cat and main.js?dog and match on resourceQuery

[Jakobud]

I'm not familiar with that. Where would that resourceQuery value go? Like this?

{
  "websiteDog/main": "js/main.js?dog",
  "websiteCat/main": "js/main.js?cat"
}

Is that how it's supposed to work?

[Jakobud]

FYI I got it working perfectly. Thank you for the guidance!