misc: migrate to vuetify 2.0 (wip)

dev/index.js

@@ -14,6 +14,10 @@ const init = {
     const webpack = require('webpack')
     const chokidar = require('chokidar')
 
+    console.info(chalk.yellow.bold('--- ====================== ---'))
+    console.info(chalk.yellow.bold('--- Wiki.js DEVELOPER MODE ---'))
+    console.info(chalk.yellow.bold('--- ====================== ---'))
+
     global.DEV = true
     global.WP_CONFIG = require('./webpack/webpack.dev.js')
     global.WP = webpack(global.WP_CONFIG)

dev/webpack/webpack.dev.js

@@ -9,10 +9,10 @@ const { VueLoaderPlugin } = require('vue-loader')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin')
-const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
 const SriWebpackPlugin = require('webpack-subresource-integrity')
 const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
 const WriteFilePlugin = require('write-file-webpack-plugin')
+const WebpackBarPlugin = require('webpackbar')
 
 const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc'))
 const cacheDir = '.webpack-cache/cache'
@@ -235,8 +235,8 @@ module.exports = {
       hashFuncNames: ['sha256', 'sha512'],
       enabled: false
     }),
-    new SimpleProgressWebpackPlugin({
-      format: 'compact'
+    new WebpackBarPlugin({
+      name: 'Client Assets'
     }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development'),
@@ -275,7 +275,6 @@ module.exports = {
       '@': path.join(process.cwd(), 'client'),
       'vue$': 'vue/dist/vue.esm.js',
       'gql': path.join(process.cwd(), 'client/graph'),
-      'mdi': path.join(process.cwd(), 'node_modules/vue-material-design-icons'),
       // Duplicates fixes:
       'apollo-link': path.join(process.cwd(), 'node_modules/apollo-link'),
       'apollo-utilities': path.join(process.cwd(), 'node_modules/apollo-utilities'),

dev/webpack/webpack.prod.js

@@ -3,6 +3,7 @@ const path = require('path')
 const fs = require('fs-extra')
 const yargs = require('yargs').argv
 const _ = require('lodash')
+const Fiber = require('fibers')
 
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
@@ -68,6 +69,28 @@ module.exports = {
           'postcss-loader'
         ]
       },
+      {
+        test: /\.sass$/,
+        use: [
+          {
+            loader: 'cache-loader',
+            options: {
+              cacheDirectory: cacheDir
+            }
+          },
+          'style-loader',
+          'css-loader',
+          'postcss-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass'),
+              fiber: Fiber,
+              sourceMap: false
+            }
+          }
+        ]
+      },
       {
         test: /\.scss$/,
         use: [
@@ -84,6 +107,8 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
+              implementation: require('sass'),
+              fiber: Fiber,
               sourceMap: false
             }
           },
@@ -95,16 +120,6 @@ module.exports = {
           }
         ]
       },
-      {
-        test: /\.styl$/,
-        use: [
-          'style-loader',
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          'postcss-loader',
-          'stylus-loader'
-        ]
-      },
       {
         test: /\.vue$/,
         loader: 'vue-loader'
@@ -194,6 +209,7 @@ module.exports = {
     new webpack.BannerPlugin('Wiki.js - wiki.js.org - Licensed under AGPL'),
     new CopyWebpackPlugin([
       { from: 'client/static' },
+      { from: './node_modules/prismjs/components', to: 'js/prism' },
       { from: './node_modules/graphql-voyager/dist/voyager.worker.js', to: 'js/' }
     ], {}),
     new MiniCssExtractPlugin({
@@ -260,7 +276,6 @@ module.exports = {
       '@': path.join(process.cwd(), 'client'),
       'vue$': 'vue/dist/vue.esm.js',
       'gql': path.join(process.cwd(), 'client/graph'),
-      'mdi': path.resolve(process.cwd(), 'node_modules/vue-material-design-icons'),
       // Duplicates fixes:
       'apollo-link': path.join(process.cwd(), 'node_modules/apollo-link'),
       'apollo-utilities': path.join(process.cwd(), 'node_modules/apollo-utilities'),