paysera / lib-maba-webpack-extension-bundle
Provides extensions for maba/webpack-bundle to integrate better into developer environment
Installs: 9 582
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 11
Forks: 0
Open Issues: 0
Requires
- maba/webpack-bundle: ^1.0
This package is auto-updated.
Last update: 2024-11-14 16:22:54 UTC
README
This Bundle allows developer to hook into maba/webpack-bundle
webpack.config.js dumping process and make changes
needed for developer environment.
Why?
When working with maba/webpack-bundle
aliases, you can often end up in situation where neither IDE (PHPStorm) or Eslint
gets happy when you import something like this:
import { StaticTextFormGroup } from '@app/js/common/components/StaticText'; import { CheckboxFieldFormGroup } from '@app/js/common/components/CheckboxField';
- Eslint yells on you about
import/no-unresolved
; - IDE (PHPStorm) does not helps you also - no navigation to imported module (ctrl + click);
This is because you run your project from Docker
(or any other) container, paths in webpack.config.js
are valid only from container
but not from host, so IDE (PHPStorm) fails to recognize paths in webpack.config.js
.
Installation
composer require --dev paysera/lib-maba-webpack-extension-bundle
In your AppKernel
:
if (in_array($this->getEnvironment(), array('dev', 'test'))) { // ... $bundles[] = new Paysera\Bundle\MabaWebpackExtensionBundle\PayseraMabaWebpackExtensionBundle(); }
Configuration
As this Bundle is only needed for development purposes, we suggest you to configure it only in config_dev.yml
.
Bundle exposes these options:
paysera_maba_webpack_extension: replace_paths: /home/app/src: "/home/me/Projects/my-project" replace_items: webpack_config_path: true alias: true manifest_path: true entry: false replaced_webpack_config_path: "%kernel.cache_dir%/webpack.config_%kernel.environment%.js" maba_webpack: aliases: prefix: '%' # change the prefix to something different than "@"
replace_paths
-array
of key-value paths to replace inwebpack.config.js
.replace_items
-array
of switches where to usereplace_paths
on.replaced_webpack_config_path
-string
where to put modifiedwebpack.config.js
.- change the default
maba_webpack.aliases.prefix
to something different than@
,#
or!
Recommended setup
In your config_dev.yml
:
paysera_maba_webpack_extension: replace_paths: /home/app/src: "/home/me/Projects/my-project"
Install eslint-import-resolver-webpack
and configure your .eslintrc
settings with:
"settings": { "import/resolver": { "webpack": { "config": "app/cache/dev/webpack.config_dev.js" } } }
With these lines you'll be able to get rid of import/no-unresolved
message.
IDE config
Just change IDE's webpack.config.js
to app/cache/dev/webpack.config_dev.js