Webpack-encore: webpack resolve alias

[gimler]

I need to define a resolve alias see
https://webpack.js.org/configuration/resolve/

To use the following plugin
https://github.com/RobinHerbots/Inputmask#selecting-the-dependencylib

How can i do this?

[davidmpaz]

Hi
I have done something like:

// export the final configuration
let config = Encore.getWebpackConfig();
config.resolve.alias = {
    'local': path.resolve(__dirname, './resources/src')
};
module.exports = config;

My use case was only to get relative modules aliased to something else, later dont need to use the dot syntax import './xyz'

Basically, assign built condifuration to a variable and change it before exporting it.

Hope it helps,
cheers

[weaverryan]

This is correct! I've added an issue to document this: https://github.com/symfony/symfony-docs/issues/8067. It feels a bit odd to need to "dig into" the webpack configuration like this... but there's no value to adding a helper function to Encore, which just does this exact thing. It does, however, need to be easy to find how to do in the docs :)

Thanks for the issue!

[gimler]

@davidmpaz it works thx

[Tech-Nomad]

In my case "./" before the path caused problems.
After removing it from the path string, Webpack finally resolved the alias!! 🎉

let config = Encore.getWebpackConfig();
config.resolve.alias["~"] = path.resolve(__dirname, 'assets/js');
module.exports = config;

And then just like this:

import Header from '~/components/Header.vue'

More Info here:
https://webpack.js.org/configuration/resolve/
https://symfony.com/doc/current/frontend/encore/advanced-config.html

[Blackskyliner]

If someone has this problem in a more modern version of Webpack you can just use:

Encore
// ...
.addAliases({
  '~': path.resolve(__dirname, 'assets/js')
})
// ...
;