Laravel Mix 中的 Webpack 别名为 node_modules答案

【问题标题】：Webpack alias in Laravel Mix to node_modulesLaravel Mix 中的 Webpack 别名为 node_modules
【发布时间】：2019-09-14 21:24:01
【问题描述】：

我想在 Laravel 5.8 项目中使用 VUE.JS 中的别名来导入我的模块中的 css 和 js。

webpack.mix.js

mix.webpackConfig({
resolve: {
    alias: {
        'alias':  path.resolve(
            __dirname,
            '~myModule/src'
        )
     }
   }
});

在我的 VUE App.js 中，我想导入 css 文件夹，我写道：

资源/js/app.js

// css files
import 'alias/lib/css'

// js files
import 'alias/lib/script'

但我错了，因为别名没有解析：

./resources/js/app.js 中的错误未找到模块：错误：无法解析 'alias/lib/css' in...

你能帮我解决这个问题吗？

【问题讨论】：

为什么在path.resolve函数中使用波浪号~？
@AndriiGolubenko，我尝试使用和不使用〜但不起作用。我以为 ~ 是 node_modules 的别名。
您是否尝试将 node_modules 的路径指定为相对路径？像这样path.join(__dirname, './node_modules/myModule/src' )
当我在 Laravel Mix 中看到 webpack 配置时，您应该能够从您感兴趣的模块中导入文件，如下所示：import 'myModule/src/lib/script.js'
@AndriiGolubenko 感谢 Andrii 的帮助。这是真的 Laravel MIx 使用 import 'myModule/src/lib/script' 效果很好（没有 .js 它会导入所有文件夹）。但是如果我替换模块版本，我更喜欢使用别名在一个地方更新所有 url：它只是为了有一个干净的代码。也许我的 webpack.mix.js 不正确或者没有正确加载。

标签： javascript laravel vue.js webpack laravel-mix

【解决方案1】：

经过多次尝试，我遇到了问题。代码很好，但我错过了正确加载 webpack.mix.js：

From Laravel Mix documentation:

webpack.mix.js 文件是所有资产编译的入口点。将其视为 Webpack 周围的轻量级配置包装器。混合任务可以链接在一起，以准确定义资产的编译方式。

但如果您使用的是 npm run watch，则在编译新更改的资产之前不会（重新）加载它。这意味着：

如果您处于监视模式 (npm run watch) 退出并重新启动它以加载新的更新 webpack.config.js 如果您更改了它。

终于成功了！它会正确解析新别名！

这是我在 webpack.config.js 中使用的最终配置：

mix.webpackConfig({
resolve: {
    alias: {
        'aliasName':  path.resolve(
            __dirname,
            'node_modules/MyModule/src/'
        )
     }
   }
});

另一种选择是：

mix.webpackConfig({
    resolve: {
        modules: [
            'node_modules'
        ],
        alias: {
            'aliasName' : 'MyModule/src/'
        }
    }
});

然后在我的 Vue 组件中（或在 vue app.js 中，以防万一）

 <template>

     <myModule-component></myModule-component>

 </template>

    require('aliasName/lib/css');      // to load full css directory
    require('aliasName/lib/script');   // to load full js directory

    import MyModuleComponent from 'aliasName/widgets/MyModuleComponent.vue'

    ...
    export default {
        ...
        components: {
           'myModule-component': MyModuleComponent
        }

【讨论】：