Relative paths are usually used by default, but they are not easy to manage, for example

import '../compoments/tabs'
import '../../template/helloWorld'

At this time, as long as we use the module's resolution method "resolve" to set the alias in webpack.config.js, we can abbreviate it when importing to save the trouble of calculating the relative position, for example

module.exports = {
    //...
    resolve: {
        alias: {
            '@compoments': path.resolve(__dirname, 'assets/src/javascript/compoments'),
            '@template': path.resolve(__dirname, 'assets/src/javascript/template'),
            '@scss': path.resolve(__dirname, 'assets/src/scss'),
        }
    }
    
}

changed to

import '@compoments/tabs'
import '@template/helloWorld'
import '@scss/app.scss'

Of course, the @ at the beginning is a symbol that I am used to customizing to distinguish pure words. You can also not use it. For more methods, please refer to the official website description.