Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save nachodd/4e120492a5ddd56360e8cff9595753ae to your computer and use it in GitHub Desktop.
Save nachodd/4e120492a5ddd56360e8cff9595753ae to your computer and use it in GitHub Desktop.
// On PhpStorm, when ussing with laravel mix, for Alias path resolving in components you have to:
// - create a webpack.config.js file separately like:
const path = require('path')
const webpack = require('webpack')
module.exports = {
...
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'~': path.resolve(__dirname, './resources/assets/js')
}
},
...
}
// And then import it in the webpack.mix.js like:
const config = require('./webpack.config')
...
mix.webpackConfig(config)
// Make sure the webpack configuration file is pointed correctly in the configuration of the PhpStorm in: Settings > Languages & Frameworks > Javascript > Webpack
@PaxExterminatus
Copy link

Thanks a great solution.
Can I provide this for my team using the git repository?

@nachodd
Copy link
Author

nachodd commented Jun 14, 2019

Of course man! I'm glad it helped you :)
Come on, spread the word!

@kslr
Copy link

kslr commented Sep 30, 2019

cool

@bnd170
Copy link

bnd170 commented Dec 11, 2019

Works properly. Thanks!

@nachodd
Copy link
Author

nachodd commented Dec 11, 2019

You're welcome! 😁

@codisfy
Copy link

codisfy commented Mar 3, 2020

Thanks !!

@plweil
Copy link

plweil commented Apr 10, 2020

I'm a little confused. I already have a webpack.config.js file that was put in by laravel-mix (don't you?). How do I integrate your code? If I just paste it in, and then import it into webpack.mix.js, nothing works. The existing webpack.config.js looks like this (minus the comments):

require(__dirname + '/node_modules/laravel-mix/src/index');

Mix.paths.setRootPath( path.resolve(__dirname) );

require(Mix.paths.mix());

Mix.dispatch('init', Mix);

let WebpackConfig = require(__dirname + '/node_modules/laravel-mix/src/builder/WebpackConfig');

module.exports = new WebpackConfig().build();

@waltersteven
Copy link

Thanks @nachodd! It worked in PhpStorm 2020.1.

@alessandrofuda
Copy link

Another solution without create a webpack.config.js file separately:

phpstorm search for webpack.config.js,
so into: phpstorm | Settings | Languages & Frameworks | Javascript | Webpack

have to set this path: your-project/node_modules/laravel-mix/setup/webpack.config.js

this works for me

@ndtuan412
Copy link

Another solution without create a webpack.config.js file separately:

phpstorm search for webpack.config.js,
so into: phpstorm | Settings | Languages & Frameworks | Javascript | Webpack

have to set this path: your-project/node_modules/laravel-mix/setup/webpack.config.js

this works for me

worked for me too, thanks

@huzzidiel
Copy link

Another solution without create a webpack.config.js file separately:

phpstorm search for webpack.config.js,
so into: phpstorm | Settings | Languages & Frameworks | Javascript | Webpack

have to set this path: your-project/node_modules/laravel-mix/setup/webpack.config.js

this works for me

Worked!!! thanks so much

@mah3uz
Copy link

mah3uz commented Oct 29, 2021

Another solution without create a webpack.config.js file separately:

phpstorm search for webpack.config.js,
so into: phpstorm | Settings | Languages & Frameworks | Javascript | Webpack

have to set this path: your-project/node_modules/laravel-mix/setup/webpack.config.js

this works for me

@alessandrofuda Thanks a lot man.
You saved my day.

@moay
Copy link

moay commented Nov 7, 2021

@alessandrofuda You are the man 🚀

@kon3ko
Copy link

kon3ko commented Nov 15, 2021

Another solution without create a webpack.config.js file separately:

phpstorm search for webpack.config.js, so into: phpstorm | Settings | Languages & Frameworks | Javascript | Webpack

have to set this path: your-project/node_modules/laravel-mix/setup/webpack.config.js

this works for me

@alessandrofuda Omg! Thank a lot

@amiraghyan99
Copy link

Another solution without create a webpack.config.js file separately:

phpstorm search for webpack.config.js, so into: phpstorm | Settings | Languages & Frameworks | Javascript | Webpack

have to set this path: your-project/node_modules/laravel-mix/setup/webpack.config.js

this works for me

good job @alessandrofuda
in 2021.1 version need confirm from Event Log (right side bottom)

@Arendach
Copy link

Another solution without create a webpack.config.js file separately:

phpstorm search for webpack.config.js, so into: phpstorm | Settings | Languages & Frameworks | Javascript | Webpack

have to set this path: your-project/node_modules/laravel-mix/setup/webpack.config.js

this works for me

thank :) 🥇

@nitogel
Copy link

nitogel commented Sep 27, 2022

Another solution without create a webpack.config.js file separately:

phpstorm search for webpack.config.js, so into: phpstorm | Settings | Languages & Frameworks | Javascript | Webpack

have to set this path: your-project/node_modules/laravel-mix/setup/webpack.config.js

this works for me

Thank you! 🥳

@carvemerson
Copy link

Another solution without create a webpack.config.js file separately:

phpstorm search for webpack.config.js, so into: phpstorm | Settings | Languages & Frameworks | Javascript | Webpack

have to set this path: your-project/node_modules/laravel-mix/setup/webpack.config.js

this works for me

Nice!!!!

@nghuuquyen
Copy link

Another solution without create a webpack.config.js file separately:

phpstorm search for webpack.config.js, so into: phpstorm | Settings | Languages & Frameworks | Javascript | Webpack

have to set this path: your-project/node_modules/laravel-mix/setup/webpack.config.js

this works for me

Thanks, it worked for me !!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment