如何在 webpack 配置中定义 url 的别名，类似于 vite

Question

using Vite to generate a VueJs project npm init vue@latest I 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.

Answer 1

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