Update dependencies and improve build system

service/config/base.js

@@ -0,0 +1,60 @@
+'use strict'
+
+const { DefinePlugin } = require('webpack')
+const { VueLoaderPlugin } = require('vue-loader')
+const ESLintPlugin = require('eslint-webpack-plugin')
+
+const resolveClientEnv = require('../utils/resolveClientEnv')
+const paths = require('../utils/paths')
+
+const config = require('../project.config')
+
+const isProd = process.env.NODE_ENV === 'production'
+const outputFileName = paths.getAssetPath(`js/[name]${isProd ? '' : ''}.js`)
+
+module.exports = {
+  context: process.cwd(),
+
+  entry: {
+    app: './src/main.js',
+  },
+
+  output: {
+    path: paths.resolve(config.outputDir),
+    publicPath: config.dev.publicPath,
+    filename: outputFileName,
+    chunkFilename: outputFileName,
+  },
+
+  resolve: {
+    alias: {
+      '@': paths.resolve('src'),
+    },
+    extensions: ['.js','.vue', '.json'],
+  },
+
+  plugins: [
+    new ESLintPlugin({
+      emitError: true,
+      emitWarning: true,
+      extensions: ['.js', '.vue'],
+      formatter: require('eslint-formatter-friendly'),
+    }),
+    new VueLoaderPlugin(),
+    new DefinePlugin({
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
+      ...resolveClientEnv({ publicPath: config.dev.publicPath }),
+    }),
+  ],
+
+  module: {
+    noParse: /^(vue)$/,
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+    ],
+  },
+}

service/config/css.js

@@ -0,0 +1,52 @@
+'use strict'
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+const genStyleRules = () => {
+  const isProd = process.env.NODE_ENV === 'production'
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      // how many loaders before css-loader should be applied to [@import]ed resources.
+      // stylePostLoader injected by vue-loader + postcss-loader
+      importLoaders: 1 + 1,
+      esModule: false, // css-loader using ES Modules as default in v4, but vue-style-loader support cjs only.
+    },
+  }
+  const postcssLoader = {
+    loader: 'postcss-loader'
+  }
+  const extractPluginLoader = {
+    loader: MiniCssExtractPlugin.loader,
+  }
+  const vueStyleLoader = {
+    loader: 'vue-style-loader',
+  }
+
+  function createCSSRule(test, loader, loaderOptions) {
+    const loaders = [cssLoader, postcssLoader]
+
+    if (isProd) {
+      loaders.unshift(extractPluginLoader)
+    } else {
+      loaders.unshift(vueStyleLoader)
+    }
+
+    if (loader) {
+      loaders.push({ loader, options: loaderOptions })
+    }
+
+    return { test, use: loaders }
+  }
+
+  return [
+    createCSSRule(/\.css$/),
+  ]
+}
+
+module.exports = {
+  module: {
+    rules: genStyleRules(),
+  },
+}

service/config/dev.js

@@ -0,0 +1,34 @@
+'use strict'
+
+const { merge } = require('webpack-merge')
+
+const baseWebpackConfig = require('./base')
+const cssWebpackConfig = require('./css')
+const config = require('../project.config')
+
+module.exports = merge(baseWebpackConfig, cssWebpackConfig, {
+  mode: 'development',
+
+  devtool: 'eval-cheap-module-source-map',
+
+  devServer: {
+    historyApiFallback: {
+      rewrites: [{ from: /./, to: '/index.html' }],
+    },
+    dev: {
+      publicPath: config.dev.publicPath,
+    },
+    overlay: {
+      warnings: true,
+      errors: true,
+    },
+    open: false,
+    host: '0.0.0.0',
+    port: config.dev.port,
+    liveReload: false,
+  },
+
+  infrastructureLogging: {
+    level: 'warn',
+  },
+})

service/config/prod.js

@@ -0,0 +1,40 @@
+'use strict'
+
+const { merge } = require('webpack-merge')
+const TerserPlugin = require('terser-webpack-plugin')
+
+const baseWebpackConfig = require('./base')
+const cssWebpackConfig = require('./css')
+const config = require('../project.config')
+const terserOptions = require('./terserOptions')
+
+module.exports = merge(baseWebpackConfig, cssWebpackConfig, {
+  mode: 'production',
+
+  output: {
+    publicPath: config.build.publicPath,
+  },
+
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin(terserOptions())],
+    moduleIds: 'deterministic',
+    splitChunks: {
+      cacheGroups: {
+        defaultVendors: {
+          name: `chunk-vendors`,
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10,
+          chunks: 'initial',
+        },
+        common: {
+          name: `chunk-common`,
+          minChunks: 2,
+          priority: -20,
+          chunks: 'initial',
+          reuseExistingChunk: true,
+        },
+      },
+    },
+  },
+})

service/config/terserOptions.js

@@ -0,0 +1,42 @@
+'use strict'
+
+module.exports = (options) => ({
+  terserOptions: {
+    compress: {
+      // turn off flags with small gains to speed up minification
+      arrows: false,
+      collapse_vars: false, // 0.3kb
+      comparisons: false,
+      computed_props: false,
+      hoist_funs: false,
+      hoist_props: false,
+      hoist_vars: false,
+      inline: false,
+      loops: false,
+      negate_iife: false,
+      properties: false,
+      reduce_funcs: false,
+      reduce_vars: false,
+      switches: false,
+      toplevel: false,
+      typeofs: false,
+
+      // a few flags with noticable gains/speed ratio
+      // numbers based on out of the box vendor bundle
+      booleans: true, // 0.7kb
+      if_return: true, // 0.4kb
+      sequences: true, // 0.7kb
+      unused: true, // 2.3kb
+
+      // required features to drop conditional branches
+      conditionals: true,
+      dead_code: true,
+      evaluate: true,
+    },
+    mangle: {
+      safari10: true,
+    },
+  },
+  // parallel: options.parallel,
+  extractComments: false,
+})