update js dependencies

web/List.vue

@@ -28,7 +28,7 @@
         <transition name="expand">
             <div id="date" class="customRow" v-if="showDate">
                 <div>
-                    <datepicker language="de" v-model="date" :mondayFirst="true" :inline="true"
+                    <datepicker :language="de" v-model="date" :mondayFirst="true" :inline="true"
                                 :highlighted="highlighted"></datepicker>
 
                 </div>
@@ -97,6 +97,7 @@
     import moment from "moment";
     import "moment/locale/de-at";
     import Datepicker from 'vuejs-datepicker';
+    import {de} from 'vuejs-datepicker/dist/locale';
     import Info from "./Info.vue";
 
     if (process.env.NODE_ENV === "production") {
@@ -121,7 +122,8 @@
                     from: new Date(),
                     to: new Date(),
                 },
-                showDate: false
+                showDate: false,
+                de: de
             };
         },
         props: ["channel"],
@@ -387,7 +389,7 @@
     }
 
     #httpError {
-        background-color: $warning;
+        background-color: #f0ad4e;
     }
 
     #date {

web/package.json

@@ -10,17 +10,17 @@
     "json": "cross-env NODE_ENV=production webpack --profile --json > stats.json"
   },
   "dependencies": {
-    "autoprefixer": "^7.2.6",
-    "axios": "^0.17.1",
+    "autoprefixer": "^8.6.1",
+    "axios": "^0.18.0",
     "markdown-it": "^8.4.0",
-    "milligram": "git+https://github.com/Findus23/milligram.git",
+    "milligram": "^1.3.0",
     "moment": "^2.20.1",
     "node-vibrant": "^3.0.0",
     "normalize.css": "^8.0.0",
     "vue": "^2.5.13",
     "vue-head": "^2.0.12",
     "vue-router": "^3.0.1",
-    "vuejs-datepicker": "^0.9.26"
+    "vuejs-datepicker": "^1.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-beta.40",
@@ -33,19 +33,20 @@
     "cross-env": "^5.1.3",
     "css-loader": "^0.28.9",
     "eslint": "^4.17.0",
-    "eslint-loader": "^1.9.0",
+    "eslint-loader": "^2.0.0",
     "eslint-plugin-html": "^4.0.2",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.6",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.2.0",
     "image-webpack-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.4.0",
     "node-sass": "^4.7.2",
-    "sass-loader": "^6.0.6",
-    "vue-loader": "^14.1.1",
+    "postcss-loader": "^2.1.5",
+    "sass-loader": "^7.0.3",
+    "vue-loader": "^15.2.4",
     "vue-template-compiler": "^2.5.13",
-    "webpack": "^3.11.0",
-    "webpack-dev-server": "^2.11.1",
-    "webpack-subresource-integrity": "^1.0.3",
+    "webpack": "^4.12.0",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-subresource-integrity": "^1.1.0-rc.4",
     "yaml-loader": "^0.5.0"
   },
   "eslintConfig": {

web/webpack.config.js

@@ -4,7 +4,8 @@ let CleanWebpackPlugin = require('clean-webpack-plugin');
 let HtmlWebpackPlugin = require('html-webpack-plugin');
 let SriPlugin = require('webpack-subresource-integrity');
 let CompressionPlugin = require('compression-webpack-plugin');
-let ExtractTextPlugin = require("extract-text-webpack-plugin");
+let MiniCssExtractPlugin = require("mini-css-extract-plugin");
+let VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 module.exports = {
     entry: {polyfill: "@babel/polyfill", app: './main.js'},
@@ -14,6 +15,7 @@ module.exports = {
         filename: '[name]-build-[hash].js',
         crossOriginLoading: "anonymous"
     },
+    mode: process.env.NODE_ENV,
     module: {
         rules: [
             {
@@ -29,12 +31,14 @@ module.exports = {
                         img: 'src',
                         image: 'xlink:href'
                     },
-                    postcss: [require('autoprefixer')()]
                 }
             },
             {
                 test: /\.js$/,
-                exclude: /(node_modules|bower_components)/,
+                exclude: file => (
+                    /node_modules/.test(file) &&
+                    !/\.vue\.js/.test(file)
+                ),
                 use: {
                     loader: 'babel-loader',
                     options: {
@@ -59,7 +63,7 @@ module.exports = {
                     {
                         loader: 'file-loader',
                         options: {
-                            name: '[name].[ext]?hash=[hash]'
+                            // name: '[name].[ext]?hash=[hash]'
                         }
                     },
                     {
@@ -72,6 +76,44 @@ module.exports = {
                         },
                     },
                 ],
+            },
+            {
+                test: /\.yaml$/,
+                loader: 'yml-loader'
+            },
+            {
+                test: /\.scss$/,
+                use: [
+                    process.env.NODE_ENV !== 'production'
+                        ? 'vue-style-loader'
+                        : MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    {
+                        loader: "postcss-loader",
+                        options: {
+                            plugins: [require('autoprefixer')()]
+                        }
+                    },
+                    'sass-loader'
+                ]
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    process.env.NODE_ENV !== 'production'
+                        ? 'vue-style-loader'
+                        : MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {importLoaders: 1}
+                    },
+                    {
+                        loader: "postcss-loader",
+                        options: {
+                            plugins: [require('autoprefixer')()]
+                        }
+                    },
+                ]
             }
         ]
     },
@@ -95,12 +137,18 @@ module.exports = {
             hashFuncNames: ['sha256'],
             enabled: process.env.NODE_ENV === 'production',
         }),
-        new webpack.optimize.CommonsChunkPlugin({name: "commons"}),
-        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/)
-    ]
+        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/),
+
+        new VueLoaderPlugin()
+    ],
 };
 
 if (process.env.NODE_ENV === 'production') {
+    module.exports.optimization = {
+        splitChunks: {
+            name: "commons"
+        }
+    };
     module.exports.devtool = '#source-map';
     // http://vue-loader.vuejs.org/en/workflow/production.html
     module.exports.plugins = (module.exports.plugins || []).concat([
@@ -115,18 +163,15 @@ if (process.env.NODE_ENV === 'production') {
                 NODE_ENV: '"production"'
             }
         }),
-        new webpack.optimize.UglifyJsPlugin({
-            sourceMap: true,
-            compress: {
-                warnings: false
-            }
-        }),
         new webpack.LoaderOptionsPlugin({
             minimize: true
         }),
-        new ExtractTextPlugin("style-[hash].css"),
+        new MiniCssExtractPlugin("style-[hash].css"),
         new CompressionPlugin({
-            test: /\.(js|css)/
+            test: /\.(js|css|html)/
         }),
+        // new SriPlugin({
+        //     hashFuncNames: ['sha256'],
+        // }),
     ]);
 }