- Phpstorm Add Webpack Alias
- Phpstorm Can't Analyse Webpack.config.js
- Phpstorm Webpack Alias
- Phpstorm Webpack Alias Not Working
- Phpstorm Webpack Watch
After a long time, I wanted to show you another quick tip. At the moment I work a lot with InertiaJS, built by Jonathan Reinink. It allows you to create fully client-side rendered, single-page apps. It makes a lot of fun, but there was one thing that has always been annoying me. At least if you're using Laravel Mix.
Hello, I'm trying to setup PhpStorm to debug php files for an application running with Webpack, the configuration in webpack.config.js is the following: devServer: proxy: '/server&quo. Configurare webpack (10:43) Start Creare un'applicazione React, autocompletamento, refactoring e debugging (13:22) Start Creare app angular, modulo e. Webpack sass phpstorm nuxt.js node-modules. Improve this question. Follow edited Aug 20 '20 at 12:28. Asked Aug 20 '20 at 11:08. Sbnc.eu sbnc.eu. 388 3 3 silver badges 9 9 bronze badges. Add a comment 1 Answer Active Oldest Votes. Turns out, the issue is. PhpStorm does not recognise Sass files imported with usage webpack aliases. I'm using PhpStorm 2018.2 for an Angular project (build with Webpack 4.16) I set up aliases within webpack to import scss files like this: In my scss files, I can do import like this: From a webpack point of vue, it is working great. But PhpSotrm is giving me an error. Close your PhpStorm. Remove package-lock.json and nodemodules. Then regenerate package-lock.json with npm install. Start PhpStorm and open your project. Confirm that now it works. Event log like; Module resolution rules from webpack.config.js are now used for coding assistance. Discard all changes with git checkout.
If you take a look at the demo project PingCRM, there is a file called webpack.mix.js. You will find something like this:
This allows you to import components directly from the resources/js directory like so:
What sucks now is, that you can not use PhpStorm autocompletion when you hover over the path, press cmd and click to jump to that file as you always do. This is because PhpStorm doesn't know how to resolve that.
Phpstorm Add Webpack Alias
The solution
But there is a solution of course. And it's quite easy.
Create a separate webpack file and extract that webpack configuration to that file. You end up something like this:
The only thing you have to do now is to tell Laravel Mix to use that webpack configuration instead of the inline-configuration. You should end up with this in your webpack.mix.js:
Phpstorm Can't Analyse Webpack.config.js
The last step is to tell PhpStorm there is a webpack configuration that can be used. Because PhpStorm only accepts webpack configuration in this case, the above steps have been necessary.
Phpstorm Webpack Alias
Go to the settings and define your new created webpack.config.js file there and you're done. It takes a little bit of time until PhpStorm recognizes it.
Phpstorm Webpack Alias Not Working
Phpstorm Webpack Watch
If everything worked paths like '@/Shared/Logo' should now be resolved by PhpStorms autocompletion and let you jump directly into that file.