How to add custom webpack alias ?

[cuduy197]

How to add custom webpack alias using "preact.config.js" ?

[cuduy197]

https://ant.design/docs/react/use-with-create-react-app
I'm switch from cra -> preact-cli
I dont know how to add config to modify less-loader ? pleace help me

[SaraVieira]

@cuduy197

To add a alias you need to create a preact.config.js and do something like this:

export default (config, env, helpers) => {
  const alias =  config.resolve.alias;

  alias['your-alias'] = 'pathtoyourFile.js';
};

[cuduy197]

@SaraVieira Thanks you 👍 , how can i config less-loader ?

[SaraVieira]

Trying to check that now :)

[SaraVieira]

@cuduy197 Here you go man

  const loaders = config.module.loaders;
  const lessloader = helpers
    .getLoadersByName(config, 'proxy-loader')
    .filter(loader => loader.loader.options.loader === 'less-loader')[0].loader
    .options;

  lessloader.options['youroption'] = 'stuff';

[SaraVieira]

Just place that after all in the first one and you can change both :)

[cuduy197]

@SaraVieira WOW, Thanks you alot <3

[SaraVieira]

@cuduy197 Worked fine ? :)

[cuduy197]

Yeah 😄

[SaraVieira]

Awesome !

@reznord @developit can you guys close this issue ? :)

[lukeed]

Thanks @SaraVieira

[drKnoxy]

for future devs

export default function(config, env, helpers) {
  // Additional top-level alias
  config.resolve.alias = Object.assign(
    {},
    {
      components: resolve(__dirname, "src/components/"),
      global: resolve(__dirname, "src/global/"),
      routes: resolve(__dirname, "src/routes/")
    },
    config.resolve.alias
  );
}