Add Webpack Encore

.gitignore

@@ -2,6 +2,7 @@
 /public/css
 /public/js
 /public/media
+/public/build
 !/public/media/image/.gitkeep
 
 /app/config/parameters.yml
@@ -40,3 +41,8 @@
 ###> phpunit/phpunit ###
 /phpunit.xml
 ###< phpunit/phpunit ###
+
+###> symfony/webpack-encore-bundle ###
+/npm-debug.log
+/yarn-error.log
+###< symfony/webpack-encore-bundle ###

composer.json

@@ -91,6 +91,7 @@
         "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",

config/bundles.php

@@ -70,4 +70,5 @@ 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],
 ];

config/packages/assets.yaml

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

config/packages/webpack_encore.yaml

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

package.json

@@ -7,6 +7,7 @@
     "semantic-ui-css": "^2.2.0"
   },
   "devDependencies": {
+    "@symfony/webpack-encore": "^0.28.0",
     "babel-core": "^6.26.3",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-module-resolver": "^3.1.1",
@@ -36,6 +37,7 @@
     "rollup-plugin-inject": "^2.0.0",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-uglify": "^4.0.0",
+    "sass-loader": "^7.0.1",
     "upath": "^1.1.0",
     "yargs": "^6.4.0"
   },

src/Sylius/Bundle/AdminBundle/Resources/private/entry.js

@@ -0,0 +1,13 @@
+import './js/shim/shim-jquery';
+import './js/shim/shim-semantic-ui';
+
+import 'semantic-ui-css/semantic.css';
+
+import 'sylius/ui-resources/js/app';
+import './js/app';
+
+import 'sylius/ui-resources/sass/main.scss';
+import './sass/main.scss';
+
+import './img/admin-logo.svg';
+import 'sylius/ui-resources/img/logo.png';

src/Sylius/Bundle/AdminBundle/Resources/views/_scripts.html.twig

@@ -0,0 +1 @@
+{% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/admin/js/app.js'} %}

src/Sylius/Bundle/AdminBundle/Resources/views/_styles.html.twig

@@ -0,0 +1 @@
+{% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/admin/css/style.css'} %}

src/Sylius/Bundle/AdminBundle/Resources/views/layout.html.twig

@@ -3,7 +3,7 @@
 {% block title %} | Sylius{% endblock %}
 
 {% block stylesheets %}
-    {% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/admin/css/style.css'} %}
+    {% include '@SyliusAdmin/_styles.html.twig' %}
 
     {{ sonata_block_render_event('sylius.admin.layout.stylesheets') }}
 {% endblock %}
@@ -49,7 +49,7 @@
 {% endblock %}
 
 {% block javascripts %}
-    {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/admin/js/app.js'} %}
+    {% include '@SyliusAdmin/_scripts.html.twig' %}
 
     {{ sonata_block_render_event('sylius.admin.layout.javascripts') }}
 {% endblock %}

src/Sylius/Bundle/ShopBundle/Resources/private/entry.js

@@ -0,0 +1,15 @@
+import './js/shim/shim-jquery';
+import './js/shim/shim-lightbox';
+import './js/shim/shim-semantic-ui';
+
+import 'semantic-ui-css/semantic.css';
+import 'lightbox2/dist/css/lightbox.min.css';
+
+import 'sylius/ui-resources/js/app';
+import './js/app';
+
+import 'sylius/ui-resources/sass/main.scss';
+import './scss/style.scss';
+
+import 'sylius/ui-resources/img/logo.png';
+import 'sylius/ui-resources/img/avatar.png';

src/Sylius/Bundle/ShopBundle/Resources/views/_scripts.html.twig

@@ -0,0 +1 @@
+{% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/shop/js/app.js'} %}

src/Sylius/Bundle/ShopBundle/Resources/views/_styles.html.twig

@@ -0,0 +1 @@
+{% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/shop/css/style.css'} %}

src/Sylius/Bundle/ShopBundle/Resources/views/layout.html.twig

@@ -18,7 +18,7 @@
         <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
         <![endif]-->
 
-        {% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/shop/css/style.css'} %}
+        {% include '@SyliusShop/_styles.html.twig' %}
 
         {{ sonata_block_render_event('sylius.shop.layout.stylesheets') }}
     {% endblock %}
@@ -71,7 +71,7 @@
 </div>
 
 {% block javascripts %}
-    {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/shop/js/app.js'} %}
+    {% include '@SyliusShop/_scripts.html.twig' %}
 
     {{ sonata_block_render_event('sylius.shop.layout.javascripts') }}
 {% endblock %}

symfony.lock

@@ -785,6 +785,24 @@
             "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"
     },

webpack.config.js

@@ -0,0 +1,44 @@
+const path = require('path');
+const Encore = require('@symfony/webpack-encore');
+
+const uiBundleScripts = path.resolve(__dirname, 'src/Sylius/Bundle/UiBundle/Resources/private/js/');
+const uiBundleResources = path.resolve(__dirname, 'src/Sylius/Bundle/UiBundle/Resources/private/');
+
+// Shop config
+Encore
+  .setOutputPath('public/build/shop/')
+  .setPublicPath('/build/shop')
+  .addEntry('shop-entry', './src/Sylius/Bundle/ShopBundle/Resources/private/entry.js')
+  .disableSingleRuntimeChunk()
+  .cleanupOutputBeforeBuild()
+  .enableSourceMaps(!Encore.isProduction())
+  .enableVersioning(Encore.isProduction())
+  .enableSassLoader();
+
+const shopConfig = Encore.getWebpackConfig();
+
+shopConfig.resolve.alias['sylius/ui'] = uiBundleScripts;
+shopConfig.resolve.alias['sylius/ui-resources'] = uiBundleResources;
+shopConfig.name = 'shop';
+
+Encore.reset();
+
+// Admin config
+Encore
+  .setOutputPath('public/build/admin/')
+  .setPublicPath('/build/admin')
+  .addEntry('admin-entry', './src/Sylius/Bundle/AdminBundle/Resources/private/entry.js')
+  .disableSingleRuntimeChunk()
+  .cleanupOutputBeforeBuild()
+  .enableSourceMaps(!Encore.isProduction())
+  .enableVersioning(Encore.isProduction())
+  .enableSassLoader();
+
+const adminConfig = Encore.getWebpackConfig();
+
+adminConfig.resolve.alias['sylius/ui'] = uiBundleScripts;
+adminConfig.resolve.alias['sylius/ui-resources'] = uiBundleResources;
+adminConfig.externals = Object.assign({}, adminConfig.externals, { window: 'window', document: 'document' });
+adminConfig.name = 'admin';
+
+module.exports = [shopConfig, adminConfig];