Why is there no webpack alias to src by default?



  • Vue CLI provides a webpack alias to the src folder via ‘@’

    Why is this not the same with Quasar? It means that existing Vue users must spend time searching for how to make this work.

    To add an alias, go to quasar.conf.js, find the following code and add the lines between the comments:

    ...
          extendWebpack (cfg) {
            cfg.module.rules.push({
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /node_modules|quasar/,
              options: {
                cache: true
              }
            })
            // Add the following code
            cfg.resolve.alias = {
              ...cfg.resolve.alias,
              '@': path.resolve(__dirname, 'src')
            }
            ////
          }
    ...
    

    To provide the same alias to your Jest testing environment, go to jest.config.js and add:

    '^@/(.*)$': '<rootDir>/src/$1', to the moduleNameMapper object


  • Admin



  • @rstoenescu my main concern is that not mapping ‘@’ is different to what Vue does by default. Some people will be copying existing Vue components across to their Quasar project. Why not make it the same?

    Additionally, I apologise for missing this section of the documentation, but it’s easy to do without a search function. Are the docs going to be searchable soon?



  • I too don’t understand why ‘@’ isn’t used here to be more aligned with others behavior, I’d understand sometime a bit difference here or there would make your work stand out but I don’t think this is one of them.



  • Yes, I remember I was first time confused about src alias, but now I’m ok with it, as mainly working with quasar-only.

    Main issue I have that IDE (intellij) always trying to use relative paths for the modules. Probably it’s possible to configure it somewhere, but by this moment I’m fixing that by hands.



  • It’s possible to use webpack with IDEA IDE: https://www.jetbrains.com/help/idea/using-webpack.html
    Just set separate webpack.js file and include it into the quasar.conf.js


Log in to reply