Migrate to webpack-encore

.gitignore

@@ -15,8 +15,17 @@ web/typo3conf/ext/*
 !web/typo3conf/ext/ep_products/
 !web/typo3conf/ext/ep_theme/
 !web/typo3conf/ext/ep_track/
-web/typo3conf/ext/ep_events/Resources/Public/*
+web/typo3conf/ext/ep_events/Resources/Public/manifest.json
-web/typo3conf/ext/ep_theme/Resources/Public/*
+web/typo3conf/ext/ep_events/Resources/Public/css/*
+web/typo3conf/ext/ep_events/Resources/Public/fonts/*
+web/typo3conf/ext/ep_events/Resources/Public/images/*
+web/typo3conf/ext/ep_events/Resources/Public/js/*
+web/typo3conf/ext/ep_theme/Resources/Public/manifest.json
+web/typo3conf/ext/ep_theme/Resources/Public/css/*
+web/typo3conf/ext/ep_theme/Resources/Public/fonts/*
+web/typo3conf/ext/ep_theme/Resources/Public/images/*
+web/typo3conf/ext/ep_theme/Resources/Public/js/*
+!.gitkeep
 web/typo3conf/LocalConfiguration.php
 web/typo3conf/AdditionalConfiguration.php
 web/typo3conf/PackageStates.php

web/typo3conf/ext/ep_events/package.json

@@ -6,8 +6,8 @@
   "license": "WTFPL",
   "repository": "https://gitlab.com/dreipunktnull/ep_theme.git",
   "scripts": {
-    "dev": "./node_modules/.bin/encode dev",
+    "dev": "./node_modules/.bin/encore dev",
-    "build": "./node_modules/.bin/encode production"
+    "build": "./node_modules/.bin/encore production"
   },
   "dependencies": {
     "@fengyuanchen/datepicker": "^0.6.4",

web/typo3conf/ext/ep_events/webpack.config.js

@@ -10,7 +10,6 @@ Encore
     .autoProvidejQuery()
     .enableSourceMaps(!Encore.isProduction())
     .cleanupOutputBeforeBuild()
-    .enableBuildNotifications()
     .enablePostCssLoader()
     .configureFilenames({
         js: 'js/[name].js',

web/typo3conf/ext/ep_theme/.babelrc

@@ -1,5 +0,0 @@
-{
-  "presets": [
-    "es2015"
-  ]
-}

web/typo3conf/ext/ep_theme/.jshintrc

@@ -1,21 +0,0 @@
-{
-  "node": true,
-  "browser": true,
-  "esnext": true,
-  "bitwise": true,
-  "camelcase": true,
-  "curly": true,
-  "eqeqeq": true,
-  "immed": true,
-  "indent": 2,
-  "latedef": true,
-  "newcap": true,
-  "noarg": true,
-  "quotmark": "single",
-  "undef": true,
-  "unused": true,
-  "strict": true,
-  "trailing": true,
-  "smarttabs": true,
-  "jquery": true
-}

web/typo3conf/ext/ep_theme/Configuration/TypoScript/Extensions/PbSocial.ts

@@ -10,3 +10,6 @@ plugin.tx_pbsocial {
         partialRootPaths.100 = EXT:ep_theme/Resources/Private/Partials/SocialMedia/
     }
 }
+
+page.includeCSS.pbsocialcss >
+page.includeJSFooter.pbsocialjs >

web/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.ts

@@ -14,7 +14,8 @@ page {
     shortcutIcon = EXT:ep_theme/Resources/Public/images/favicon_ep.ico
 
     includeJSFooterlibs {
-        vendor = EXT:ep_theme/Resources/Public/js/vendor.min.js
+        manifest = EXT:ep_theme/Resources/Public/js/manifest.js
+        vendor = EXT:ep_theme/Resources/Public/js/vendor.js
         gmaps = {$plugin.tx_eptheme.settings.googleMapsJsApiUrl}
         gmaps.external = 1
         gmaps.async = 1
@@ -22,12 +23,11 @@ page {
     }
 
     includeJSFooter {
-        main = EXT:ep_theme/Resources/Public/js/main.min.js
+        main = EXT:ep_theme/Resources/Public/js/main.js
-        main.async = 1
     }
 
     includeCSS {
-        main = EXT:ep_theme/Resources/Public/css/main.min.css
+        main = EXT:ep_theme/Resources/Public/css/main.css
     }
 
     10 = FLUIDTEMPLATE

web/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.txt

@@ -107,6 +107,7 @@ config {
     htmlTag_langKey = de
     compressJs = 1
     compressCss = 1
+    compressBody = 0
     typolinkCheckRootline = 1
     typolinkEnableLinksAcrossDomains = 1
 }

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js

@@ -1,11 +1,22 @@
 'use strict';
 
+// Require images
+require('../images/logo.svg');
+require('../images/logo_wide.svg');
+require('../images/favicon_ep.ico');
+require('../images/at.png');
+require('../images/ch.png');
+require('../images/de.png');
+require('../images/fr.png');
+require('../images/badge_skipass.png');
+
 // Import dependencies
 import Vue from 'vue'
 import $ from 'jquery'
 import moment from 'moment'
 import fancybox from '@fancyapps/fancybox'
 
+require('cookieconsent');
 require('slick-carousel');
 require('jquery-lazy');
 require('bootstrap/dist/js/bootstrap');

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/boarderweek.js

@@ -1,6 +1,7 @@
 'use strict';
 
-require('cookieconsent');
 require('./app');
 
+require('../images/logo_boarderweek.svg');
+require('../images/favicon_sbw.ico');
 require('../scss/main_boarderweek.scss');

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/bus.js

@@ -1,3 +1,3 @@
 import Vue from 'vue';
 
-module.exports = new Vue();
+export default new Vue();

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/main.js

@@ -1,6 +1,5 @@
 'use strict';
 
-require('cookieconsent');
 require('./app');
 
 require('../scss/main.scss');

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/snowzone.js

@@ -1,6 +1,7 @@
 'use strict';
 
-require('cookieconsent');
 require('./app');
 
+require('../images/logo_snowzone.svg');
+require('../images/favicon_sz.ico');
 require('../scss/main_snowzone.scss');

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js

@@ -1,7 +1,8 @@
 'use strict';
 
-require('cookieconsent');
 require('./app');
 
+require('../images/logo_uni_champ.svg');
+require('../images/favicon_uch.ico');
 require('../scss/main_unichamp.scss');
 

web/typo3conf/ext/ep_theme/package.json

@@ -6,38 +6,17 @@
   "license": "WTFPL",
   "repository": "https://gitlab.com/dreipunktnull/ep_theme.git",
   "scripts": {
-    "dev": "webpack --progress --watch",
+    "dev": "./node_modules/.bin/encore dev",
-    "build": "webpack -p --progress --env production",
+    "build": "./node_modules/.bin/encore production"
-    "tunnel": "ngrok http -host-header=rewrite eptypo3.burn.dpn:80"
   },
   "devDependencies": {
-    "babel-core": "^6.22.1",
+    "@symfony/webpack-encore": "^0.19.0",
-    "babel-loader": "^7.1.1",
+    "autoprefixer": "^8.2.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
+    "node-sass": "^4.8.3",
-    "babel-preset-env": "^1.3.2",
+    "postcss-loader": "^2.1.3",
-    "babel-preset-es2015": "^6.13.2",
+    "sass-loader": "^6.0.7",
-    "babel-preset-stage-2": "^6.22.0",
+    "vue-loader": "^14.2.2",
-    "babel-register": "^6.22.0",
+    "vue-template-compiler": "^2.5.16"
-    "babel-runtime": "^6.23.0",
-    "clean-webpack-plugin": "^0.1.11",
-    "copy-webpack-plugin": "^4.3.0",
-    "css-loader": "^0.28.0",
-    "extract-text-webpack-plugin": "^2.0.0",
-    "file-loader": "^0.11.1",
-    "image-webpack-loader": "^3.2.0",
-    "node-sass": "^4.7.2",
-    "postcss-loader": "^2.0.9",
-    "resolve-url-loader": "^2.2.1",
-    "sass-loader": "^6.0.3",
-    "style-loader": "^0.14.0",
-    "svg-url-loader": "^2.1.1",
-    "url-loader": "^0.5.9",
-    "vue-hot-reload-api": "^1.2.0",
-    "vue-html-loader": "^1.2.3",
-    "vue-loader": "^13.0.4",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.5.11",
-    "webpack": "^2.6.1"
   },
   "dependencies": {
     "@fancyapps/fancybox": "^3.2.5",

web/typo3conf/ext/ep_theme/webpack.config.js

@@ -1,149 +1,30 @@
+const Encore = require('@symfony/webpack-encore');
 const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 
-module.exports = function webpackConfig (env) {
+Encore
-    let devMode = (env !== 'production');
+    .setOutputPath('./Resources/Public/')
-    return {
+    .setPublicPath('/typo3conf/ext/ep_theme/Resources/Public/')
-        devtool: devMode ? 'sourcemap' : false,
+    .addEntry('main', './Resources/Private/Assets/js/main.js')
-        entry: {
+    .addEntry('boarderweek', './Resources/Private/Assets/js/boarderweek.js')
-            vendor: [
+    .addEntry('snowzone', './Resources/Private/Assets/js/snowzone.js')
-                'jquery', 'vue', 'bootstrap/dist/js/bootstrap', 'slick-carousel',
+    .addEntry('unichamp', './Resources/Private/Assets/js/unichamp.js')
-                'moment', 'cookieconsent', 'picturefill', '@fancyapps/fancybox'
+    .addStyleEntry('rte', './Resources/Private/Assets/css/rte.css')
-            ],
+    .createSharedEntry('vendor', [
-            main: './Resources/Private/Assets/js/main.js',
+        'jquery', 'vue', 'bootstrap/dist/js/bootstrap', 'slick-carousel',
-            boarderweek: './Resources/Private/Assets/js/boarderweek.js',
+        'moment', 'cookieconsent', 'picturefill', '@fancyapps/fancybox'
-            snowzone: './Resources/Private/Assets/js/snowzone.js',
+    ])
-            unichamp: './Resources/Private/Assets/js/unichamp.js',
+    .addPlugin(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
-            rte: './Resources/Private/Assets/css/rte.css'
+    .enableSassLoader()
-        },
+    .enableVueLoader()
-        output: {
+    .autoProvidejQuery()
-            path:  __dirname + '/Resources/Public/js',
+    .enableSourceMaps(!Encore.isProduction())
-            publicPath: '/typo3conf/ext/ep_theme/Resources/Public/',
+    .cleanupOutputBeforeBuild()
-            filename: '[name].min.js'
+    .enablePostCssLoader()
-        },
+    .configureFilenames({
-        resolve: {
+        js: 'js/[name].js',
-            alias: {
+        css: 'css/[name].css',
-                jquery: __dirname + '/node_modules/jquery/src/jquery',
+        images: 'images/[name].[ext]'
-                vue: devMode ? 'vue/dist/vue' : 'vue/dist/vue.min'
+    })
-            }
+;
-        },
+
-        externals: {
+module.exports = Encore.getWebpackConfig();
-            'google': 'google'
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.js$/,
-                    use: [
-                        {
-                            loader: 'babel-loader',
-                            options: {
-                                presets: ['es2015']
-                            }
-                        }
-                    ],
-                },
-                {
-                    test: /\.vue$/,
-                    use: [ 'vue-loader' ]
-                },
-                {
-                    test: /\.(s)?css$/,
-                    use: ExtractTextPlugin.extract({
-                        fallback: 'style-loader',
-                        use: [
-                            { loader: 'css-loader', options: { sourceMap: true, importLoaders: 3 } },
-                            { loader: 'postcss-loader', options: { sourceMap: true } },
-                            'resolve-url-loader',
-                            { loader: 'sass-loader', options: { sourceMap: true } }
-                        ]
-                    })
-                },
-                {
-                    test: /\.svg$/,
-                    exclude: /fonts/,
-                    use: [
-                        {
-                            loader: 'url-loader',
-                            options: {
-                                name: '[name].[ext]',
-                                outputPath: '../images/',
-                                publicPath: '/typo3conf/ext/ep_theme/Resources/Public/images/'
-                            }
-                        }
-                    ]
-                },
-                {
-                    test: /\.(woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-                    exclude: /images/,
-                    use: {
-                        loader: 'file-loader',
-                        options: {
-                            name: '[name].[ext]',
-                            outputPath: '../fonts/',
-                            publicPath: '/typo3conf/ext/ep_theme/Resources/Public/fonts/'
-                        }
-                    }
-                },
-                {
-                    test: /\.(gif|png)$/,
-                    use: [
-                        {
-                            loader: 'url-loader',
-                            options: {
-                                limit: 4096,
-                                name: '[name].[ext]',
-                                outputPath: '../images/',
-                                publicPath: '/typo3conf/ext/ep_theme/Resources/Public/images/'
-                            }
-                        }
-                    ]
-                },
-                {
-                    test: /\.(jpg|ico)$/,
-                    use: [
-                        {
-                            loader: 'file-loader',
-                            options: {
-                                name: '[name].[ext]',
-                                outputPath: '../images/',
-                                publicPath: '/typo3conf/ext/ep_theme/Resources/Public/images/'
-                            }
-                        }
-                    ]
-                }
-            ]
-        },
-        plugins: [
-            new webpack.optimize.CommonsChunkPlugin({
-                name: 'vendor',
-                minChunks: Infinity
-            }),
-            new webpack.ProvidePlugin({
-                $: 'jquery',
-                jQuery: 'jquery'
-            }),
-            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-            new ExtractTextPlugin({
-                filename: '../css/[name].min.css',
-            }),
-            new CopyWebpackPlugin(
-                [
-                    {
-                        context: __dirname + '/Resources/Private/Assets/images',
-                        from: '**/*',
-                        to: __dirname + '/Resources/Public/images',
-                    }
-                ]
-            ),
-            new CleanWebpackPlugin([
-                'Resources/Public/css',
-                'Resources/Public/images',
-                'Resources/Public/js',
-                'Resources/Public/fonts'
-            ])
-        ]
-    }
-};