// Imports
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const metadata = require('../../../src/data/metadata')

// Globals
const IS_PROD = process.env.NODE_ENV === 'production'
process.env.VUE_ENV = 'client'

function useMetadata (template, filename) {
  return [{
    template: `src/${template}.template.html`,
    filename: `${filename || `_${template}`}.html`,
    ...metadata,
  }]
}

module.exports = config => {
  require('./base')(config)

  config
    .entry('app')
    .clear()
    .add('./src/entry-client.js')
    .end()

  config.plugin('VueSSRClientPlugin')
    .use(VueSSRClientPlugin)

  config.plugin('html-spa')
    .use(HtmlWebpackPlugin, useMetadata('spa', '_fallback'))

  config.plugin('html-crowdin')
    .use(HtmlWebpackPlugin, useMetadata('crowdin'))

  config.plugin('pwa').after('html-spa')

  config.optimization
    .minimize(IS_PROD)
    .splitChunks({
      cacheGroups: {
        vuetify: {
          test: /[\\/]vuetify[\\/]lib[\\/]/,
          enforce: true,
        },
      },
      chunks: 'all',
      maxAsyncRequests: 20,
      maxInitialRequests: 5,
      minSize: 20000,
    })

  config.target('web')

  config.module
    .rule('json')
    .resourceQuery(/blockType=codepen-resources/)
    .use('json')
    .loader('json-loader')
    .end()
}

@@ -57,24 +57,79 @@
 ck-plugin')%0A
+const metadata = require('../../../src/data/metadata')%0A
 const VueSSR
@@ -191,63 +191,8 @@
 in')
-%0Aconst metadata = require('../../../src/data/metadata')
 %0A%0A//
@@ -921,31 +921,8 @@
 ion%0A
-    .minimize(IS_PROD)%0A
     
@@ -1174,16 +1174,237 @@
     %7D)%0A%0A
+  config.optimization%0A    .minimize(IS_PROD)%0A    .minimizer('css')%0A    .use(require('terser-webpack-plugin'))%0A    .use(require('optimize-css-assets-webpack-plugin'), %5B%7B%0A      cssProcessorOptions: %7B safe: true %7D,%0A    %7D%5D)%0A%0A
   config

implement terser and optimize-css-assets