Possible to have image paths resolved using webpack's resolve.alias?

[oller]

It doesn't look like this is currently supported by the loader, but please correct me if I'm wrong!

In my webpack.config.js

  resolve: {
        alias: {
            // Allow friendly reference to core modules
            "core": path.resolve(config.root, "../core")
        }
    },

https://webpack.github.io/docs/configuration.html#resolve-alias

I'm aliasing core to a path, so I can have shorter friendlier paths to the core across my application, this works fine in my js files.

As it stands my images still need relative paths, to reference common assets in the core:

<img src="../../../core/symbols/image.svg">

If the resolve.alias were factored into path resolving, this could been simplified to:

<img src="core/symbols/image.svg">

Would this be possible?

[emaphp]

Hi. Replacing paths with elements in the resolve object is not yet a feature of this loader. For now, paths must be relative to the corresponding image. I'll look into this subject bacause it could be interesting to have.

[vladimiry]

I have such webpack resolve config section defined

        resolve: {
            alias: {
                _common_templates: LIBS.path.join(metadata.paths.srcCustomer, 'templates')
            }
        }

I then do including @include('_templates/footer.html') / @include('~_templates/footer.html') and I'm getting error:

Module not found: Error: Cannot resolve 'file' or 'directory' ./_templates/foo  ter.html in

So aliases have not taken into account and unfortunately it makes underscore-template-loader absolutely not usable in my case.

[vladimiry]

Though I was wrong, resolving happens when I do @include('~_templates/footer.html'), but I get this code injected into the html page instead of the just footer code:

This is how generated html source looks

I use it with html-webpack-plugin.

PS. I ended up with such form of insertion <%= require('_common_templates/footer.html')({someValue: 123}) %> which works well enough.

[emaphp]

Just to let you guys know: I'm actually working on this. The main problem here is that webpack doesn't provide a straightforward way to obtain the current configuration file. This is currently the implementation of the require macro:

module.exports = {
    require: function (resourcePath) {
        return "require(" + JSON.stringify(loaderUtils.urlToRequest(resourcePath)) + ").apply(null,arguments)";
    },

   //...
};

As you may already figured out, there's no smart postprocessing here. If there's an alias defined in your configuration file, the loader will just ignore it. My idea is to add a hack to parse the configuration file at startup and then call the macro using that configuration object as its context. And yes, I'm using the word 'hack' unironically, webpack documentation is not a lot of help on this subject.

[dmackerman]

Have you tried using the ~ character in your paths to respect aliases? ie:

<img src="~images/something.png" />

This works for us. We're using Webpack 2.

[itsashis4u]

@dmackerman Didn't work for me in the .js file, worked in .scss file