Update webpack configs

client/build/utils.js

@@ -1,56 +1,10 @@
 'use strict'
 const path = require('path')
 const config = require('../config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const packageConfig = require('../package.json')
 
 const isDev = process.env.NODE_ENV !== 'production';
 
-const styleRule = (scss) => {
-  const test = scss ? /\.scss$/ : /\.css$/;
-  let use = [
-    {
-      loader: 'css-loader',
-      // options: {importLoaders: scss ? 3 : 2}
-      options: {
-        sourceMap: isDev,
-        importLoaders: scss ? 2 : 1
-      }
-    },
-    'postcss-loader'
-  ];
-  if (scss) {
-    use = [
-      ...use,
-      {
-        loader: 'sass-loader',
-        options: {
-          data: process.env.THEME ? `@import "styles/themes/_${process.env.THEME}.scss";` : '',
-          sourceMap: isDev
-        }
-      }
-    ]
-  }
-
-  if (!isDev) {
-    return {
-      test,
-      loader: ExtractTextPlugin.extract({
-        use,
-        fallback: 'vue-style-loader'
-      })
-    }
-  } else {
-    return {
-      test,
-      use: [
-        'vue-style-loader',
-        ...use
-      ]
-    }
-  }
-}
-
 const assetsPath = (_path) => {
   const assetsSubDirectory = isDev
     ? config.dev.assetsSubDirectory
@@ -78,7 +32,6 @@ const createNotifierCallback = () => {
 }
 
 module.exports = {
-  styleRule,
   isDev,
   assetsPath,
   createNotifierCallback

client/build/webpack.base.conf.js

@@ -1,10 +1,11 @@
 'use strict';
 const path = require('path');
 const config = require('../config');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 const {VueLoaderPlugin} = require('vue-loader');
 
-const {isDev, styleRule, assetsPath} = require('./utils');
+const {isDev, assetsPath} = require('./utils');
 
 function resolve(dir) {
   return path.join(__dirname, '..', dir);
@@ -37,6 +38,11 @@ module.exports = {
       ? config.dev.assetsPublicPath
       : config.build.assetsPublicPath,
   },
+  optimization: {
+    splitChunks: {
+      chunks: 'all'
+    }
+  },
   resolve: {
     extensions: ['.js', '.vue', '.json', '.gql', '.graphql', '.scss'],
     alias: {
@@ -121,8 +127,17 @@ module.exports = {
           name: assetsPath('fonts/[name].[hash:7].[ext]'),
         },
       },
-      styleRule(false), // css rule
+      {
-      styleRule(true), // sass rule
+        test: /\.s?css$/,
+        use: [
+          isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader',
+          'sass-loader'
+        ]
+      }
+      // styleRule(false), // css rule
+      // styleRule(true), // sass rule
     ],
   },
   plugins: [

client/build/webpack.dev.conf.js

@@ -20,7 +20,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
   devServer: {
     client: {
       logging: 'warn',
-      overlay: config.dev.errorOverlay,
+      overlay: config.dev.errorOverlay ? {errors: true, warnings: false} : false,
       progress: true,
 
     },
@@ -42,13 +42,15 @@ const devWebpackConfig = merge(baseWebpackConfig, {
   plugins: [
     new webpack.DefinePlugin({
       'process.env': require('../config/dev.env'),
+        // bundler feature flags https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags
+      __VUE_OPTIONS_API__: true, // default, but explicit
+      __VUE_PROD_DEVTOOLS__: false, // default, but explicit
     }),
     new webpack.HotModuleReplacementPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
-      inject: true,
       ...require('../config/dev.env'),
     }),
     // copy custom static assets

client/build/webpack.prod.conf.js

@@ -1,16 +1,16 @@
-'use strict'
+'use strict';
-const path = require('path')
+const path = require('path');
-const utils = require('./utils')
+const utils = require('./utils');
-const webpack = require('webpack')
+const webpack = require('webpack');
-const config = require('../config')
+const config = require('../config');
-const merge = require('webpack-merge')
+const {merge} = require('webpack-merge');
-const baseWebpackConfig = require('./webpack.base.conf')
+const baseWebpackConfig = require('./webpack.base.conf');
-const CopyWebpackPlugin = require('copy-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 
-const env = require('../config/prod.env')
+const env = require('../config/prod.env');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const webpackConfig = merge(baseWebpackConfig, {
   devtool: config.build.productionSourceMap ? config.build.devtool : false,
@@ -18,28 +18,26 @@ const webpackConfig = merge(baseWebpackConfig, {
   output: {
     path: config.build.assetsRoot,
     filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
   },
   plugins: [
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     new webpack.DefinePlugin({
-      'process.env': env
+      'process.env': env,
+      // bundler feature flags https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags
+      __VUE_OPTIONS_API__: true, // default, but explicit
+      __VUE_PROD_DEVTOOLS__: false, // default, but explicit
     }),
     // extract css into its own file
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
       filename: utils.assetsPath('css/[name].[contenthash].css'),
-      // Setting the following option to `false` will not extract CSS from codesplit chunks.
-      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
-      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
-      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
-      allChunks: true,
     }),
     // Compress extracted CSS. We are using this plugin so that possible
     // duplicated CSS from different components can be deduped.
     new OptimizeCSSPlugin({
       cssProcessorOptions: config.build.productionSourceMap
-        ? { safe: true, map: { inline: false } }
+        ? {safe: true, map: {inline: false}}
-        : { safe: true }
+        : {safe: true},
     }),
     // generate dist index.html with correct asset hash for caching.
     // you can customize output by editing /index.html
@@ -47,20 +45,21 @@ const webpackConfig = merge(baseWebpackConfig, {
     new HtmlWebpackPlugin({
       filename: config.build.index,
       template: 'index.html',
-      inject: true,
       ...require('../config/prod.env'),
-      minify: {
+      minify: { // defaults from https://github.com/jantimon/html-webpack-plugin#minification
-        removeComments: true,
         collapseWhitespace: true,
-        removeAttributeQuotes: true
+        keepClosingSlash: true,
-        // more options:
+        removeComments: true,
-        // https://github.com/kangax/html-minifier#options-quick-reference
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true,
       },
       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
+      chunksSortMode: 'auto',
     }),
     // keep module.id stable when vendor modules does not change
-    new webpack.HashedModuleIdsPlugin(),
+    new webpack.ids.HashedModuleIdsPlugin(),
     // split vendor js into its own file
     // todo: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
     // todo: do we need this? probably default is fine
@@ -94,18 +93,22 @@ const webpackConfig = merge(baseWebpackConfig, {
     // }),
 
     // copy custom static assets
-    new CopyWebpackPlugin([
+    new CopyWebpackPlugin({
-      {
+      patterns: [
-        from: path.resolve(__dirname, '../static'),
+        {
-        to: config.build.assetsSubDirectory,
+          from: path.resolve(__dirname, '../static'),
-        ignore: ['.*']
+          to: config.build.assetsSubDirectory,
-      }
+          globOptions: {
-    ])
+            ignore: ['.*'],
-  ]
+          },
-})
+        },
+      ],
+    }),
+  ],
+});
 
 if (config.build.productionGzip) {
-  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+  const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
   webpackConfig.plugins.push(
     new CompressionWebpackPlugin({
@@ -114,17 +117,17 @@ if (config.build.productionGzip) {
       test: new RegExp(
         '\\.(' +
         config.build.productionGzipExtensions.join('|') +
-        ')$'
+        ')$',
       ),
       threshold: 10240,
-      minRatio: 0.8
+      minRatio: 0.8,
-    })
+    }),
-  )
+  );
 }
 
 if (config.build.bundleAnalyzerReport) {
-  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
 }
 
-module.exports = webpackConfig
+module.exports = webpackConfig;

client/config/index.js

@@ -58,7 +58,7 @@ module.exports = {
 
     productionSourceMap: true,
     // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#source-map',
+    devtool: 'source-map',
 
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

client/src/mixins/notification.js

@@ -1,11 +0,0 @@
-export default {
-  methods: {
-    error() {
-      this.$toast.open({
-        message: 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später noch einmal.',
-        type: 'error',
-        duration: 3000
-      });
-    }
-  }
-};

client/src/styles/_toast.scss

@@ -1,6 +0,0 @@
-@import 'vue-toast-notification/dist/theme-default.css';
-
-.toast .toast-text {
-  color: $color-white;
-  font-family: $sans-serif-font-family;
-}

server/core/templates/wagtailadmin/admin_base.html

@@ -1,7 +0,0 @@
-{% extends "wagtailadmin/admin_base.html" %}
-{% load staticfiles %}
-
-{% block extra_css %}
-    <style>
-    </style>
-{% endblock %}

server/core/templates/wagtailadmin/home.html

@@ -1,3 +0,0 @@
-{% extends "wagtailadmin/home.html" %}
-
-{% block branding_welcome %}{% endblock %}