Home > Software engineering >  How to define alias to url in webpack config similarly to vite
How to define alias to url in webpack config similarly to vite

Time:09-15

using Vite to generate a VueJs project npm init vue@latestI get the following alias in the configuration file vite.config.js:

import { fileURLToPath, URL } from 'node:url'
resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
}

Replacing the upper chunck of code in webpack v5 (for another project):

const { fileURLToPath, URL } = require("url")
resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
}

yields the following error:

'@': fileURLToPath(new URL('./src', import.meta.url))
SyntaxError: Cannot use 'import.meta' outside a module

Can you please tell me how can I replace the aliasing correctly in webpack v5? thank in advance.

CodePudding user response:

I'm not sure about the fileURLToPath, but in the docs, they are using path.resolve

const path = require('path');
resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/components')
    }
}

WEBPACK

  • Related