Add Webpack Encore #10803
Add Webpack Encore #10803
Conversation
CoderMaggie
added
DX
Could be automated with symfony-flex, I think. but I don't know if it should
|
|
This is just the first step to implement the Webpack into Sylius, Sylius-standard and plugins. When everything works and the gulp is no longer needed then we will think about improvements |
.gitignore
Outdated
| @@ -40,3 +41,8 @@ | |||
| ###> phpunit/phpunit ### | |||
| /phpunit.xml | |||
| ###< phpunit/phpunit ### | |||
|
|
|||
| ###> symfony/webpack-encore-bundle ### | |||
| npm-debug.log | |||
There was a problem hiding this comment.
| npm-debug.log | |
| /npm-debug.log |
.gitignore
Outdated
|
|
||
| ###> symfony/webpack-encore-bundle ### | ||
| npm-debug.log | ||
| yarn-error.log |
There was a problem hiding this comment.
| yarn-error.log | |
| /yarn-error.log |
| import 'semantic-ui-css/semantic.css'; | ||
| import 'lightbox2/dist/css/lightbox.min.css'; | ||
|
|
||
| import '../../../UiBundle/Resources/private/js/app'; |
There was a problem hiding this comment.
Could we pass uiBundlePath variable from webpack.config.js here? Going outside of the current bundle seems a bit like crossing some boundary.
I don't hold this opinion strongly, but I want to discuss it first :)
There was a problem hiding this comment.
in the webpack.config.js file we have the alias sylius/ui which is necessary for the app.js files. We can create another alias, e.g. sylius/ui_resources and then we'll be able to use it instead of ../../../UiBundle/Resources/private
There was a problem hiding this comment.
Sounds good! This way we'll get the absolute path to the resources. What is the naming convention here, should it be sylius/ui_resources or sylius/ui-resources?
|
Thank you, Szymon! 🎉 |
This PR was merged into the 1.7-dev branch. Discussion ---------- | Q | A | --------------- | ----- | Branch? | master | Bug fix? | yes | Related tickets | fixes #10803 This PR removes webpack-encore-bundle from dependencies to avoid errors in plugins that have no webpack configuration ### To start using the webpack you need to: 1. Install webpack-encore-bundle ``` composer require symfony/webpack-encore-bundle ``` 2. Edit `config/packages/assets.yaml` file ```yml framework: assets: packages: shop: json_manifest_path: '%kernel.project_dir%/public/build/shop/manifest.json' admin: json_manifest_path: '%kernel.project_dir%/public/build/admin/manifest.json' ``` 3. Edit `config/packages/webpack_encore.yaml` file ```yml webpack_encore: output_path: '%kernel.project_dir%/public/build/default' builds: shop: '%kernel.project_dir%/public/build/shop' admin: '%kernel.project_dir%/public/build/admin' ``` 4. Change the assets paths for admin and shop: ```js // src/Sylius/Bundle/AdminBundle/Resources/views/_scripts.html.twig {{ encore_entry_script_tags('admin-entry', null, 'admin') }} ``` ```js // src/Sylius/Bundle/AdminBundle/Resources/views/_styles.html.twig {{ encore_entry_link_tags('admin-entry', null, 'admin') }} ``` ```js // src/Sylius/Bundle/AdminBundle/Resources/views/_logo.html.twig {{ asset('build/admin/images/admin-logo.svg', 'admin') }} ``` ```js // src/Sylius/Bundle/ShopBundle/Resources/views/_scripts.html.twig {{ encore_entry_script_tags('shop-entry', null, 'shop') }} ``` ```js // src/Sylius/Bundle/ShopBundle/Resources/views/_styles.html.twig {{ encore_entry_link_tags('shop-entry', null, 'shop') }} ``` ```js // src/Sylius/Bundle/ShopBundle/Resources/views/_header.html.twig {{ asset('build/shop/images/logo.png', 'shop') }} ``` The paths should be changed for each asset you use. 5. To build the assets, run: ```bash yarn encore dev # or yarn encore production # or yarn encore dev-server ``` When compiling assets, errors may appear (they don't break the build), due to different babel configuration for gulp and webpack. Once you decide to use the webpack you can delete the `gulpfile.babel.js` and `.babelrc` from the root directory - then the errors will stop appearing. --- ➡️➡️➡️ [Webpack Encore docs](https://symfony.com/doc/current/frontend.html#webpack-encore) Commits ------- 0acde3a New Webpack approach
This is the first step to completely remove the gulp. For now, lets you choose whether you want to use the gulp or webpack. By default, it uses the gulp as before.
To switch to the webpack, just change the assets paths:
And for shop:
The paths should be changed for each asset you use.
To build the assets, run:
yarn encore devoryarn encore productionoryarn encore dev-serverWhen compiling assets, errors may appear (they don't break the build), due to different babel configuration for gulp and webpack. Once you decide to use the webpack you can delete the
gulpfile.babel.jsand.babelrcfrom the root directory - then the errors will stop appearing.➡️➡️➡️ Webpack Encore docs