Webpack from A to Asia: Webpack resolve alias – extensions

Tram Ho

Webpack from A to Asia with kentrung

Today’s article we will learn how to create aliases in webpack along with how to handle file extensions that extensions

1. What is Alias?

Alias ​​is the absolute path to replace the relative path when importing modules. The example is as follows:

The way below is to use alias. This way we save us from having to write lengthy paths, having to compare the relative position between one file and another. In general, people use alias to create the root path for the project.

2. resolve.alias

Code file webpack.config.js

Note that when we use alias, there can be two problems while writing code:

  • Eslint does not understand and reports errors.
  • The specific texteditor I am using is that VSCode does not suggest.

To fix this problem, you refer to the article here to know how to fix: https://kipalog.com/posts/Config-alias-chuan-trong-webpack

3. resolve.extensions

Resolve file extensions in order.

Code file webpack.config.js

If multiple files share the same name but have different extensions, webpack will resolve the one with the extension listed first in the array and skip the rest.

Using:


This article is over, hopefully with this article you have added a lot of useful knowledge. See you in the next article!

Share the news now

Source : Viblo