upgrade webpack template

.babelrc

@@ -14,11 +14,17 @@
       }
     }]
   ],
-  "plugins": ["transform-object-rest-spread"],
-  "comments": false,
+  "plugins": [
+    "transform-object-rest-spread",
+    "transform-vue-jsx"
+  ],
   "env": {
     "test": {
-      "plugins": [ "istanbul" ]
+      "plugins": [
+        "dynamic-import-node",
+        "transform-es2015-modules-commonjs",
+        "transform-vue-jsx"
+      ]
     }
   }
 }

.eslintignore

@@ -1,6 +1,6 @@
-build/*
-config/*
-docs/*
-node_modules/*
-test/e2e/reports/*
-test/unit/coverage/*
+/build/
+/config/
+/docs/
+/node_modules/
+/test/e2e/reports/
+/test/unit/coverage/

.eslintrc.js

@@ -13,7 +13,6 @@ module.exports = {
   env: {
     browser: true,
     es6: true,
-    mocha: true,
     node: true
   },
   // https://github.com/standard/standard/blob/master/docs/RULES-en.md
@@ -25,10 +24,12 @@ module.exports = {
   // add your custom rules here
   rules: {
     // allow paren-less arrow functions
-    'arrow-parens': 0,
-    'comma-dangle': 0,
-    'generator-star-spacing': 0,
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'no-new': 0
+    'arrow-parens': 'off',
+    'comma-dangle': 'off',
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-new': 'off'
   }
 }

.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
 *.log
-node_modules/
-test/e2e/reports
-test/unit/coverage
+/node_modules/
+/test/e2e/reports/
+/test/unit/coverage/

.postcssrc.js

@@ -2,6 +2,8 @@
 
 module.exports = {
   "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
     // to edit target browsers: use "browserslist" field in package.json
     "autoprefixer": {}
   }

README.md

@@ -25,7 +25,7 @@ npm install
 # serve with hot reload at localhost:8080
 npm run dev
 
-# build for production with minification, also update documentation
+# build for production with minification, and update documentation as well
 npm run build
 
 # build for production and view the bundle analyzer report
@@ -41,7 +41,7 @@ npm run e2e
 npm run test
 ```
 
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
 If you just want to write something, grab the latest release package [here](https://github.com/myst729/Vuelog/releases/latest).
 

build/build.js

@@ -1,45 +1,41 @@
 'use strict'
-require('shelljs/global')
 require('./check-versions')()
+
 process.env.NODE_ENV = 'production'
 
 const ora = require('ora')
+const rm = require('rimraf')
 const path = require('path')
 const chalk = require('chalk')
 const webpack = require('webpack')
 const config = require('../config')
 const webpackConfig = require('./webpack.prod.conf')
 
-console.log(chalk.yellow(
-  '  Tip: built files are meant to be served over an HTTP server.\n' +
-  '  Opening index.html over file:// won\'t work.\n'
-))
-
 const spinner = ora('building for production...')
 spinner.start()
 
-var assetsRoot = config.build.assetsRoot
-rm('-rf', assetsRoot)
-mkdir('-p', assetsRoot)
-echo('vuelog.js.org').to(path.join(assetsRoot, 'CNAME'))
-cp('-r', 'static', path.join(assetsRoot, config.build.assetsSubDirectory))
-cp('-r', 'userdata', path.join(assetsRoot, config.build.userdataSubDirectory))
-
-webpack(webpackConfig, function (err, stats) {
-  spinner.stop()
+rm(config.build.assetsRoot, err => {
   if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n\n')
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
 
-  if (stats.hasErrors()) {
-    console.log(chalk.red('  Build failed with errors.\n'))
-    process.exit(1)
-  }
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
 
-  console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
 })

build/check-versions.js

@@ -3,6 +3,7 @@ const chalk = require('chalk')
 const semver = require('semver')
 const packageConfig = require('../package.json')
 const shell = require('shelljs')
+
 function exec (cmd) {
   return require('child_process').execSync(cmd).toString().trim()
 }
@@ -25,8 +26,10 @@ if (shell.which('npm')) {
 
 module.exports = function () {
   const warnings = []
+
   for (let i = 0; i < versionRequirements.length; i++) {
     const mod = versionRequirements[i]
+
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
       warnings.push(mod.name + ': ' +
         chalk.red(mod.currentVersion) + ' should be ' +
@@ -39,10 +42,12 @@ module.exports = function () {
     console.log('')
     console.log(chalk.yellow('To use this template, you must update following to modules:'))
     console.log()
+
     for (let i = 0; i < warnings.length; i++) {
       const warning = warnings[i]
       console.log('  ' + warning)
     }
+
     console.log()
     process.exit(1)
   }

build/utils.js

@@ -2,11 +2,13 @@
 const path = require('path')
 const config = require('../config')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
 
 exports.assetsPath = function (_path) {
   const assetsSubDirectory = process.env.NODE_ENV === 'production'
     ? config.build.assetsSubDirectory
     : config.dev.assetsSubDirectory
+
   return path.posix.join(assetsSubDirectory, _path)
 }
 
@@ -16,14 +18,21 @@ exports.cssLoaders = function (options) {
   const cssLoader = {
     loader: 'css-loader',
     options: {
-      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
       sourceMap: options.sourceMap
     }
   }
 
   // generate loader string to be used with extract text plugin
   function generateLoaders (loader, loaderOptions) {
-    const loaders = [cssLoader]
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
     if (loader) {
       loaders.push({
         loader: loader + '-loader',
@@ -61,12 +70,32 @@ exports.cssLoaders = function (options) {
 exports.styleLoaders = function (options) {
   const output = []
   const loaders = exports.cssLoaders(options)
+
   for (const extension in loaders) {
     const loader = loaders[extension]
     output.push({
       test: new RegExp('\\.' + extension + '$'),
       use: loader
     })
   }
+
   return output
 }
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}