bug #10827 New Webpack approach (kulczy)

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
-------

0acde3ae2c New Webpack approach
This commit is contained in:
Mateusz Zalewski 2019-11-08 10:23:36 +01:00 committed by GitHub
commit 6519639c94
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 0 additions and 37 deletions

5
.gitignore vendored
View file

@ -41,8 +41,3 @@
###> phpunit/phpunit ###
/phpunit.xml
###< phpunit/phpunit ###
###> symfony/webpack-encore-bundle ###
/npm-debug.log
/yarn-error.log
###< symfony/webpack-encore-bundle ###

View file

@ -91,7 +91,6 @@
"symfony/translation": "^3.4|^4.3",
"symfony/twig-bundle": "^3.4|^4.3",
"symfony/validator": "^3.4|^4.3",
"symfony/webpack-encore-bundle": "^1.7",
"symfony/yaml": "^3.4|^4.3",
"twig/extensions": "^1.4",
"twig/twig": "^2.6",

View file

@ -70,5 +70,4 @@ return [
Nelmio\Alice\Bridge\Symfony\NelmioAliceBundle::class => ['dev' => true, 'test' => true, 'test_cached' => true],
FriendsOfBehat\SymfonyExtension\Bundle\FriendsOfBehatSymfonyExtensionBundle::class => ['test' => true, 'test_cached' => true],
Sylius\Behat\Application\SyliusTestPlugin\SyliusTestPlugin::class => ['test' => true, 'test_cached' => true],
Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
];

View file

@ -1,7 +0,0 @@
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'

View file

@ -1,5 +0,0 @@
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'

View file

@ -785,24 +785,6 @@
"ref": "dae9b39fd6717970be7601101ce5aa960bf53d9a"
}
},
"symfony/webpack-encore-bundle": {
"version": "1.0",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "master",
"version": "1.0",
"ref": "d3b160b9799c91cbfc3df6f018c795f3bf88698a"
},
"files": [
"assets/css/app.css",
"assets/js/app.js",
"config/packages/assets.yaml",
"config/packages/prod/webpack_encore.yaml",
"config/packages/webpack_encore.yaml",
"package.json",
"webpack.config.js"
]
},
"symfony/yaml": {
"version": "v4.1.3"
},