如何在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'),
    },
  },
})

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

yarn run v1.22.17 $ mix watch [webpack-cli] ReferenceError：路径是 没有定义的 在对象。 (/Users/artur/PhpstormProjects/safa-ameedee.com/webpack.mix.js:16:21) 在 Module._compile （节点：内部/模块/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 （节点：内部/模块/cjs/loader：999：19） 在需要时（节点：内部/模块/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