[Dependencies] Update dependencies and apply migration from latest dependencies upgrade guides.

- babel to 7.0.0
- vue-loader from v14 to v15
- jest configuration
- webpack configuration

Author: aquariuslt

.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": [
-    "@babel/preset-env",
-    "@babel/preset-stage-0"
+    "@babel/preset-env"
   ],
   "plugins": [
     "@babel/plugin-transform-runtime",
@@ -10,8 +9,7 @@
   "env": {
     "test": {
       "presets": [
-        "@babel/preset-env",
-        "@babel/preset-stage-0"
+        "@babel/preset-env"
       ],
       "plugins": [
         "@babel/plugin-transform-runtime"

.gitignore

@@ -7,7 +7,6 @@
 
 # Node
 node_modules
-yarn.lock
 package-lock.json
 
 

README.md

@@ -18,22 +18,22 @@ Features:
 
 ### Install Dependencies
 ```bash
-npm install
+yarn
 ```
 
 ### Development 
 ```bash
-npm run dev
+yarn run dev
 ```
 
 ### Build Production Level files
 ```bash
-npm run build
+yarn run build
 ```
 
 ### Test
 ```bash
-npm run test
+yarn test
 ```
 
 

config/base.config.js

@@ -3,7 +3,13 @@ let baseConfig = {
   dir: {
     src: 'src',
     build: 'build',
-    dist: 'dist',
+    dist: {
+      root: 'dist',
+      js: 'static/js',
+      css: 'static/css',
+      img: 'static/img',
+      manifest: 'static/manifest'
+    },
     cache: '.cache',
     test: {
       unit: 'test/unit',
@@ -17,9 +23,11 @@ let baseConfig = {
     ]
   },
   file: {
-    favicon: 'favicon.png',
-    karmaConf: 'karma.conf.babel.js',
-    nightWatch: 'nightwatch.json'
+    favicon: 'favicon.png'
+  },
+  dev: {
+    host: '127.0.0.1',
+    port: 5000
   }
 };
 

config/dev.config.js

@@ -0,0 +1,9 @@
+import path from 'path';
+
+function resolve(dir) {
+  return path.join(__dirname, '../..', dir);
+}
+
+export default {
+  resolve
+};

config/prod.config.js

@@ -1,4 +1,3 @@
-/** Created by CUIJA on 04-17-2017.*/
 import _ from 'lodash';
 
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
@@ -41,6 +40,9 @@ function buildVueStylesLoader(options) {
       css: generateStylesLoader(null, options),
       postcss: generateStylesLoader(null, options),
       less: generateStylesLoader('less', options),
+      sass: generateStylesLoader('sass', options, {indentedSyntax: true}),
+      scss: generateStylesLoader('sass', options),
+      stylus: generateStylesLoader('stylus', options),
       styl: generateStylesLoader('stylus', options)
     }
   };
@@ -52,7 +54,7 @@ function buildVueStylesLoader(options) {
  * @param {Object} extraOptions
  * */
 function generateStylesLoader(loaderNamePrefix, loaderOptions, extraOptions) {
-  let { sourceMap, extract, minimize } = loaderOptions;
+  let {sourceMap, extract, minimize} = loaderOptions;
   sourceMap = _.isUndefined(sourceMap) ? true : sourceMap;
   extract = _.isUndefined(extract) ? false : extract;
   minimize = _.isUndefined(sourceMap) ? false : minimize;

config/util/path-util.js

@@ -1,15 +1,13 @@
 /* Created by Aquariuslt on 14/04/2017.*/
 
-import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 
-import pathUtil from './util/path-util';
+import pathUtil from './utils/path-util';
 import baseConfig from './base.config';
 
 let webpackBaseConfig = {
   entry: {
-    main: './src/main.js',
-    styles: './src/styles.css'
+    main: pathUtil.resolve(baseConfig.dir.src) + '/' + 'main.js'
   },
   resolve: {
     extensions: [
@@ -26,15 +24,23 @@ let webpackBaseConfig = {
       {
         test: /\.js$/,
         include: [
-          pathUtil.root(baseConfig.dir.src),
-          pathUtil.root(baseConfig.dir.test.unit),
-          pathUtil.root(baseConfig.dir.test.e2e)
+          pathUtil.resolve(baseConfig.dir.src),
+          pathUtil.resolve(baseConfig.dir.test.unit),
+          pathUtil.resolve(baseConfig.dir.test.e2e)
         ],
         loader: 'babel-loader'
       },
+      {
+        test: /\.less$/,
+        include: pathUtil.resolve('src'),
+        loader: ExtractTextPlugin.extract({
+          use: ['css-loader', 'less-loader'],
+          fallback: ['style-loader']
+        })
+      },
       {
         test: /\.css$/,
-        include: pathUtil.root(baseConfig.dir.src),
+        include: pathUtil.resolve(baseConfig.dir.src),
         loader: ExtractTextPlugin.extract({
           use: ['css-loader'],
           fallback: ['style-loader']
@@ -60,13 +66,7 @@ let webpackBaseConfig = {
         }
       }
     ]
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: `./${baseConfig.dir.src}/index.html`,
-      favicon: `./${baseConfig.dir.src}/${baseConfig.file.favicon}`
-    })
-  ]
+  }
 };
 
 export default webpackBaseConfig;

config/utils/path-util.js

@@ -1,20 +1,28 @@
 /* Created by Aquariuslt on 14/04/2017.*/
 import webpack from 'webpack';
 import merge from 'webpack-merge';
-import webpackBaseConfig from './webpack.base.config.babel';
+import webpackBaseConfig from './webpack.base.babel';
 
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';
+import VueLoaderPlugin from 'vue-loader/lib/plugin';
+
+import vueLoaderUtil from './utils/vue-loader-util';
+import pathUtil from './utils/path-util';
+
+import baseConfig from './base.config';
+
+const PROTOCOL = 'http://';
+
 
-import devConfig from './dev.config';
-import vueLoaderUtil from './util/vue-loader-util';
-import pathUtil from './util/path-util';
 
 let webpackDevConfig = merge(webpackBaseConfig, {
+  mode: 'development',
   devtool: 'eval-source-map',
   output: {
-    path: devConfig.output.path,
-    publicPath: devConfig.output.publicPath,
+    path: pathUtil.resolve(baseConfig.dir.build),
+    publicPath: PROTOCOL + baseConfig.dev.host + ':' + baseConfig.dev.port,
     filename: '[name].bundle.js',
     sourceMapFilename: '[name].bundle.js.map',
     chunkFilename: '[id].chunk.js'
@@ -33,33 +41,20 @@ let webpackDevConfig = merge(webpackBaseConfig, {
     ]
   },
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"development"'
-      }
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function (module) {
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            pathUtil.root('node_modules')
-          ) === 0
-        );
-      }
-    }),
     new ExtractTextPlugin({
       filename: '[name].bundle.css'
     }),
+    new HtmlWebpackPlugin({
+      template: baseConfig.dir.src + '/index.html',
+      favicon: baseConfig.dir.src + '/' + baseConfig.file.favicon
+    }),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
-    new FriendlyErrorsPlugin()
+    new FriendlyErrorsPlugin(),
+    new VueLoaderPlugin()
   ],
   devServer: {
-    host: devConfig.devServer.host,
-    port: devConfig.devServer.port,
+    host: baseConfig.dev.host,
+    port: baseConfig.dev.port,
     historyApiFallback: true,
     quiet: false,
     noInfo: true,
@@ -74,7 +69,7 @@ let webpackDevConfig = merge(webpackBaseConfig, {
       chunks: true,
       chunkModules: false
     },
-    publicPath: devConfig.output.publicPath
+    publicPath: PROTOCOL + baseConfig.dev.host + ':' + baseConfig.dev.port,
   }
 });