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

8oomwypt 于 11个月前发布在 Webpack

关注(0)|答案(2)|浏览(107)

解决方案：

感谢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/laravel项目中的assets/resources文件夹，这样就可以在路径中使用@符号。

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

型
不幸的是，这会导致以下错误。
yarn run v1.22.17 $ mix watch [webpack-watch] ReferenceError：path is not defined at 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）在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）（node：internal/modules/cjs/helpers：102：18）在module.exports（/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/laravel-mix/setup/webpack.js：11：5）at loadConfigByPath（/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/webpack-cli/lib/webpack-cli.js：1747：27）at Joomla Promise.all（index 0）error Command failed with exit code 2.
我尝试了不同的变体（@assets等），但总是得到相同的错误。那么我做错了什么？

webpack

来源：https://stackoverflow.com/questions/71225442/how-to-configure-path-alias-in-webpack-mix

2条答案

按热度按时间

11dmarpk1#

错误消息表明未定义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目录的绝对路径。@别名现在表示此目录，您可以在import语句中使用它。

赞(0）回复(0）举报 11个月前

kpbwa7wx2#

在你的webpack.mix.js中：