javascript - Webpack alias in Laravel Mix to node_modules - Stack Overflow

admin管理员组

文章数量:1391995

I would like to use an alias in VUE.JS in a Laravel 5.8 project to import css and js I have in my module.

webpack.mix.js

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

In my VUE App.js I would like import the css folder and I wrote:

resources/js/app.js

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

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

But I'm wrong something becouse the alias is not resolved:

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'alias/lib/css' in...

Can you help me to fix the issue?

I would like to use an alias in VUE.JS in a Laravel 5.8 project to import css and js I have in my module.

webpack.mix.js

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

In my VUE App.js I would like import the css folder and I wrote:

resources/js/app.js

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

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

But I'm wrong something becouse the alias is not resolved:

ERROR in ./resources/js/app.js Module not found: Error: Can't resolve 'alias/lib/css' in...

Can you help me to fix the issue?

• javascript
• laravel
• vue.js
• webpack
• laravel-mix

Share Improve this question Follow asked Apr 25, 2019 at 12:32 UncokeUncoke 1,90244 gold badges3333 silver badges6363 bronze badges 6

• why you are using tilde ~ in path.resolve function? – Andrii Golubenko Commented Apr 25, 2019 at 12:49
• @AndriiGolubenko, I try with and without ~ but not works. I thought ~ was an alias to node_modules. – Uncoke Commented Apr 25, 2019 at 12:57
• are you trying to specify a path to node_modules as a relative path? Like this path.join(__dirname, './node_modules/myModule/src' ) – Andrii Golubenko Commented Apr 25, 2019 at 13:56
• and as I see webpack config in Laravel Mix, you should be able to import files from a module that you are interested in like this: import 'myModule/src/lib/script.js' – Andrii Golubenko Commented Apr 25, 2019 at 14:00
• @AndriiGolubenko Thanks Andrii for your help. That's true Laravel MIx works well using import 'myModule/src/lib/script' (without .js it import all the folder). But I prefer to use an alias to update all the url in just one place if I replace the module version: it's just to have a clean code. Maybe my webpack.mix.js is incorrect or it's not loaded properly. – Uncoke Commented Apr 26, 2019 at 5:21

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

After so many attempts I got the issue. The code was good but I was missing to load the webpack.mix.js properly:

From Laravel Mix documentation:

The webpack.mix.js file is your entry point for all asset pilation. Think of it as a light configuration wrapper around Webpack. Mix tasks can be chained together to define exactly how your assets should be piled.

But if you are using npm run watch it is not (re)loaded before to pile new changed assets. This means:

if you are in watch mode (npm run watch) exit and restart it to load new updated webpack.config.js if you changed it.

Finally it worked! And it resolve new alias properly!

Here the final config I used in webpack.config.js:

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

Another alternative is:

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

Then in my Vue ponent (or in vue app.js, just in case)

 <template>

     <myModule-ponent></myModule-ponent>

 </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 {
        ...
        ponents: {
           'myModule-ponent': MyModuleComponent
        }

本文标签： javascriptWebpack alias in Laravel Mix to nodemodulesStack Overflow