如何在 webpack.mix 中配置路径别名？

Question

解决方案：

感谢 Karl 和 Ali，我现在可以使用alias'而无需创建单独的webpack.config.js文件。只需添加如下alias所示webpack.mix.js：

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css')
    .alias({'@': 'resources/'})
    .webpackConfig({resolve: {alias: {'@': path.resolve('resources/')}}})
    .vue();

问题：

从这篇文章中，我了解到您可以配置@路径来webpack.mix.js表示项目assets/resources中的文件夹vue/laravel，以便您可以@在路径中使用该符号。

mix.webpackConfig({
  resolve: {
    alias: {
      '@resources': path.resolve('resources'),
    },
  },
})

不幸的是，这会导致以下错误。

纱线运行v1.22.17 $ mix watch [webpack-cli] ReferenceError：路径未在对象处定义。(/Users/artur/PhpstormProjects/safa-ameedee.com/webpack.mix.js:16:21) 在 Module._compile (node:internal/modules/cjs/loader:1097:14) 在 Object.Module._extensions。 .js（节点：内部/模块/cjs/loader：1149：10）在Module.load（节点：内部/模块/cjs/loader：975：32）在Function.Module._load（节点：内部/模块/cjs） /loader:822:12) 在 Module.require (node:internal/modules/cjs/loader:999:19) 在 require (node:internal/modules/cjs/helpers:102:18) 在 module.exports (/Users) /artur/PhpstormProjects/safa-ameedee.com/node_modules/laravel-mix/setup/webpack.config.js:11:5) 在 loadConfigByPath (/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/webpack-cli /lib/webpack-cli.js:1747:27) at async Promise.all (index 0) error 命令失败，退出代码为 2。

我尝试过不同的变体（@assets等等），但我总是得到相同的错误。那么我做错了什么？

Answer 1

错误消息表明该path模块未定义。该模块是 Node.js 的核心模块，用于处理和转换文件路径。您可以在文件顶部要求它，webpack.mix.js如下所示：

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
        //
    ])
   .webpackConfig({
       resolve: {
           alias: {
               '@': path.resolve(__dirname, 'resources/js'),
           },
       },
   });

在此代码中，const path = require('path');需要该path模块，并path.resolve(__dirname, 'resources/js')生成该目录的绝对路径resources/js。别名@现在代表此目录，您可以在导入语句中使用它。

Answer 2

在你的 webpack.mix.js 中：

...
.alias({'@': 'resources/js'})
...

导入别名 - Laracasts