laravel - 如何在 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();

问题:

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

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

很遗憾，这会导致以下错误。

yarn run v1.22.17 $ mix watch [webpack-cli] ReferenceError: path isnot definedat Object. (/Users/artur/PhpstormProjects/safa-ameedee.com/webpack.mix.js:16:21)at Module._compile (node:internal/modules/cjs/loader:1097:14)at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)at Module.load (node:internal/modules/cjs/loader:975:32)at Function.Module._load (node:internal/modules/cjs/loader:822:12)at Module.require (node:internal/modules/cjs/loader:999:19)at require (node:internal/modules/cjs/helpers:102:18)at module.exports (/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/laravel-mix/setup/webpack.config.js:11:5)at loadConfigByPath (/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/webpack-cli/lib/webpack-cli.js:1747:27)at async Promise.all (index 0) error Command failed with exit code 2.

我尝试了不同的变体(@assets 等)，但我总是遇到同样的错误。那我做错了什么？

Answer 1

您没有添加 path 包的显式要求，但您应该这样做。确保将以下内容添加到 webpack.config.js 文件的顶部。

const path = require('path');

另外，您可能需要添加 __dirname。

const path = require('path');

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