Necessary steps to build application

Below are described all necessary steps needed to upgrade to webpack. Some diffs might be not fully understandable, so we add project-base diff 1 and project-base diff 2 that you might find helpful.

Update your composer.json

     "arvenil/ninja-mutex": "^0.4.1",
-    "bmatzner/jquery-bundle": "^2.2.2",
-    "bmatzner/jquery-ui-bundle": "^1.10.3",
     "commerceguys/intl": "^1.0.0",
     "symfony-cmf/routing-bundle": "^2.0.3",
-    "symfony/assetic-bundle": "^2.8.2",
     "symfony/debug": "^3.4",
     "symfony/web-server-bundle": "^3.4",
+    "symfony/webpack-encore-bundle": "^1.7",
     "symfony/workflow": "^3.4",

Run composer update
Replace your config/package/assets.yaml file with following content

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'

Replace your config/package/webpack_encore.yaml file with following content

webpack_encore:
    output_path: '%kernel.project_dir%/web/build'

Move all scripts from src/Resources/scripts to assets/js
Remove folder assets/js/plugins (plugins are loaded with npm)
Update your package.json

     "name": "shopsys",
+    "scripts": {
+        "dev-server": "encore dev-server",
+        "dev": "encore dev",
+        "watch": "encore dev --watch",
+        "build": "encore production --progress",
+        "copy-assets": "./assets/js/bin/copyAssets.js",
+        "trans": "./assets/js/bin/trans.js",
+        "trans:dump": "./assets/js/bin/transDump.js",
+        "tests": "npm run tests:unit",
+        "tests:unit": "jest"
+    },
+    "dependencies": {
+        "@shopsys/framework": "9.0.0",
+        "codemirror": "^5.49.2",
+        "glob": "^7.1.6",
+        "jquery-ui": "^1.12.1",
+        "jquery-ui-touch-punch": "^0.2.3",
+        "jquery.cookie": "^1.4.1",
+        "minilazyload": "^2.3.3",
+        "nestedSortable": "^1.3.4",
+        "slick-carousel": "1.6.0"
+    },
     "devDependencies": {
+        "@babel/core": "^7.8.3",
+        "@babel/parser": "^7.7.7",
+        "@babel/preset-env": "^7.8.3",
+        "@babel/traverse": "^7.7.4",
+        "@symfony/webpack-encore": "^0.28.0",
         "autoprefixer": "^9.4.4",
+        "babel-jest": "^25.1.0",
+        "copy-webpack-plugin": "^5.1.1",
+        "core-js": "^3.0.0",
         "es6-promise": "^4.2.5",
         "eslint": "^5.12.0",
+        "event-hooks-webpack-plugin": "^2.1.5",
+        "jest": "^25.1.0",
         "grunt": "^1.0.3",
         "jit-grunt": "^0.10.0",
+        "ncp": "^2.0.0",
+        "regenerator-runtime": "^0.13.2",
         "stylelint": "^11.1.1",
-        "time-grunt": "^1.4.0"
+        "time-grunt": "^1.4.0",
+        "webpack-notifier": "^1.6.0"

Create file babel.config.js with this content

    module.exports = {
        presets: [
            [
                '@babel/preset-env',
                {
                    targets: {
                        node: 'current',
                    },
                },
            ],
        ],
    };

Run npm install or ./phing npm-install-dependencies
Create file webpack.config.js in your project root and put content from GitHub
Copy folder assets/js/commands into your assets/js folder
Copy folder assets/js/bin into your assets/js folder
Copy folder assets/js/frontend/utils into your assets/js/frontend folder
Create new js file ./assets/js/frontend.js and import into it all your frontend javascripts (find inspiration on GitHub)
Rename folder assets/js/custom_admin to assets/js/admin
Create file assets/js/admin/admin.js with this content

import '../jQuery/registerJquery';
import registerAdmin from 'framework/admin/registerAdmin';

registerAdmin();

Update your assets/js/styleguide/styleguide.js

+ import 'codemirror/addon/scroll/simplescrollbars';
  import CodeMirror from 'codemirror';

- if (typeof window !== 'undefined') global = window;

  const StyleguideIndex = {
      // ...
  }

Update your base.html.twig template

     <link rel="stylesheet" type="text/css" href="{{ asset('assets/frontend/styles/index' ~ getDomain().id ~ '_' ~ getCssVersion() ~ '.css') }}" media="screen, projection">
     <link rel="stylesheet" type="text/css" href="{{ asset('assets/frontend/styles/print' ~ getDomain().id ~ '_' ~ getCssVersion() ~ '.css') }}" media="print">
 
-    {# bootstrap/tooltip.js must be imported before bootstrap/popover.js #}

-     {{ importJavascripts([
-        'bundles/bmatznerjquery/js/jquery.min.js',
-        'bundles/bmatznerjquery/js/jquery-migrate.js',
-        'bundles/fpjsformvalidator/js/fp_js_validator.js',
-     ]) }}

+    {{ encore_entry_script_tags('frontend') }}

     {% block html_body %}{% endblock %}
 
-    {% if app.environment == 'dev' %}
-        <script async src="//localhost:35729/livereload.js"></script>
-    {% endif %}
-
-
-    {{ importJavascripts([
-        'frontend/plugins/*.js',
-        'common/components/escape.js',
-        'common/components/keyCodes.js',
-        'common/register.js',
-        'common/bootstrap/tooltip.js',
-        'common/bootstrap/popover.js',
-        'common/plugins/*.js',
-        'frontend/validation/form/*.js',
-        'common/validation/*.js',
-        'frontend/cart/*.js',
-        'frontend/order/*.js',
-        'frontend/product/*.js',
-        'common/*.js',
-        'frontend/*.js',
-        'common/components/*.js',
-        'frontend/components/*.js',
-    ]) }}
 
     {% block javascripts_bottom %}{% endblock %}

     {{ js_validator_config() }}
     {{ init_js_validation() }}
 </body>

Update your .gitignore file

+ /assets/js/translations.json

Remove folder tests/App/Functional/Component/Javascript

Necessary steps to build javascripts

We refactored all javascripts in #1545. You have two ways how to perform upgrade. The first way is incorporate changes from framework's common javascripts into your files. Those changes are described in diffs on next lines. The second way is to download all new javascripts from assets/js and put your changes into it. You can found git diff command after individual files.

We recommend the second way although it is more demanding because new javascripts will be used as source for next upgrade notes.

Remove file assets/js/frontend/responsive.js
Update your assets/js/frontend/cart/cartBox.js

+ import Ajax from 'framework/common/utils/Ajax';
+ import Register from 'framework/common/utils/Register';

  (function ($) {

-     Shopsys = window.Shopsys || {};
+     const Shopsys = window.Shopsys || {};

      Shopsys.cartBox.reload = function (event) {
-         Shopsys.ajax({
+         Ajax.ajax({
              loaderElement: '#js-cart-box',
              ...
          });
      };

-     Shopsys.register.registerCallback(Shopsys.cartBox.init);
+     (new Register()).registerCallback(Shopsys.cartBox.init);
})(jQuery)