update to node 11

Author: Bill Stavroulakis

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": [["es2015", { "modules": false }], "stage-2"],
+  "presets": ["@babel/preset-env"],
   "ignore": ["node_modules/*"]
 }

.eslintrc.js

@@ -1,22 +1,11 @@
 module.exports = {
-  root: true,
-  parser: 'babel-eslint',
-  parserOptions: {
-    sourceType: 'module'
-  },
-  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: 'standard',
-  // required to lint *.vue files
-  plugins: [
-    'html'
+  extends: [
+    // add more generic rulesets here, such as:
+    // 'eslint:recommended',
+    'plugin:vue/recommended'
   ],
-  // add your custom rules here
-  'rules': {
-    // allow paren-less arrow functions
-    'arrow-parens': 0,
-    // allow async-await
-    'generator-star-spacing': 0,
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  rules: {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
   }
-}
+}

.travis.yml

@@ -1,5 +1,4 @@
 language: node_js
 node_js:
-  - "7"
-  - "8"
+  - "11"
 script: npm run test --single-run

build/webpack.base.config.js

@@ -1,73 +1,85 @@
-const path = require('path')
-const webpack = require('webpack')
-const vueConfig = require('./vue-loader.config')
+const path = require("path");
+const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const config = {
-  devtool: '#source-map',
+  devtool: "#source-map",
   entry: {
-    app: './src/client-entry.js',
-    vendor: ['vue', 'vue-router', 'vuex', 'vuex-router-sync', 'axios']
+    app: "./src/client-entry.js",
+    vendor: ["vue", "vue-router", "vuex", "vuex-router-sync", "axios"]
   },
   resolve: {
-    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
-    extensions: ['.js', '.vue'],
+    modules: [path.resolve(__dirname, "src"), "node_modules"],
+    extensions: [".js", ".vue"],
     alias: {
-      'src': path.resolve(__dirname, '../src'),
-      'assets': path.resolve(__dirname, '../src/assets'),
-      'components': path.resolve(__dirname, '../src/components'),
-      'theme': path.resolve(__dirname, './src/theme'),
+      src: path.resolve(__dirname, "../src"),
+      assets: path.resolve(__dirname, "../src/assets"),
+      components: path.resolve(__dirname, "../src/components"),
+      theme: path.resolve(__dirname, "./src/theme")
     }
   },
   output: {
-    path: path.resolve(__dirname, '../dist'),
-    publicPath: '/',
-    filename: (process.env.NODE_ENV === 'production') ? 'assets/js/[name].[hash].js' : 'assets/js/[name].js'
+    path: path.resolve(__dirname, "../dist"),
+    publicPath: "/",
+    filename:
+      process.env.NODE_ENV === "production"
+        ? "assets/js/[name].[hash].js"
+        : "assets/js/[name].js"
   },
   module: {
     rules: [
       {
-        enforce: 'pre',
+        enforce: "pre",
         test: /\.js$/,
-        loader: 'eslint-loader',
+        loader: "eslint-loader",
         exclude: /node_modules/
       },
       {
-        enforce: 'pre',
+        enforce: "pre",
         test: /\.vue$/,
-        loader: 'eslint-loader',
+        loader: "eslint-loader",
         exclude: /node_modules/
       },
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          css: 'css-loader',
-          'scss': 'css-loader|sass-loader'
-        }
+        loader: "vue-loader"
+      },
+      {
+        test: /\.scss$/,
+        use: ["vue-style-loader", "css-loader", "sass-loader"]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          process.env.NODE_ENV !== "production"
+            ? "vue-style-loader"
+            : MiniCssExtractPlugin.loader,
+          "css-loader"
+        ]
       },
       {
         test: /\.js$/,
-        loader: 'babel-loader',
+        loader: "babel-loader",
         exclude: /node_modules/
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
+        loader: "file-loader",
         options: {
-          name: 'assets/[name].[ext]?[hash]'
+          name: "assets/[name].[ext]?[hash]"
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
+        loader: "url-loader",
         query: {
           limit: 10000,
-          name: 'assets/fonts/[name]_[hash:7].[ext]'
+          name: "assets/fonts/[name]_[hash:7].[ext]"
         }
       }
     ]
   },
-  plugins: []
-}
+  plugins: [new VueLoaderPlugin()]
+};
 
-module.exports = config
+module.exports = config;

build/webpack.client.config.js

@@ -2,28 +2,46 @@ const path = require('path')
 const base = require('./webpack.base.config')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const appConfig = require('../src/app.config.js')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 const config = Object.assign({}, base, {
+  mode: process.env.NODE_ENV,
+  optimization: {
+    splitChunks: {
+      chunks: 'async',
+      minSize: 30000,
+      maxSize: 0,
+      minChunks: 1,
+      maxAsyncRequests: 5,
+      maxInitialRequests: 3,
+      automaticNameDelimiter: '~',
+      name: true,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10
+        },
+        default: {
+          minChunks: 2,
+          priority: -20,
+          reuseExistingChunk: true
+        }
+      }
+    }
+  },
   plugins: (base.plugins || []).concat([
     // strip comments in Vue code
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
       BROWSER_BUILD: true
-    }),
-    // extract vendor chunks for better caching
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      filename: (process.env.NODE_ENV === 'production') ? 'assets/js/[name].[hash].js' : 'assets/js/[name].js'
     })
   ])
 })
 
-config.module.rules.filter(x => { return x.loader == 'vue-loader'}).forEach( x => x.options.extractCSS = true)
-
 config.plugins.push(
-  new ExtractTextPlugin('assets/styles.css')
+  new MiniCssExtractPlugin({
+    filename: 'assets/styles.css'
+  })
 )
 
 if (process.env.NODE_ENV === 'production') {
@@ -39,20 +57,10 @@ if (process.env.NODE_ENV === 'production') {
     })
   )
   config.plugins.push(
-    new ExtractTextPlugin('assets/styles.[hash].css'),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
+    new MiniCssExtractPlugin({
+      filename: 'assets/styles.[hash].css'
     })
   )
-} else {
-  config.plugins.push(
-    new ExtractTextPlugin('assets/styles.css')
-  )
 }
 
 module.exports = config

build/webpack.server.config.js

@@ -1,9 +1,10 @@
 const path = require('path')
 const webpack = require('webpack')
 const base = require('./webpack.base.config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 const config = Object.assign({}, base, {
+  mode: process.env.NODE_ENV,
   target: 'node',
   devtool: false,
   entry: './src/server-entry.js',
@@ -23,19 +24,15 @@ const config = Object.assign({}, base, {
 
 if (process.env.NODE_ENV === 'production') {
   config.plugins.push(
-    new ExtractTextPlugin('assets/styles.[hash].css'),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
+    new MiniCssExtractPlugin({
+      filename: 'assets/styles.[hash].css'
     })
   )
 } else {
   config.plugins.push(
-    new ExtractTextPlugin('assets/styles.css')
+    new MiniCssExtractPlugin({
+      filename: 'assets/styles.css'
+    })
   )
 }