merge updates of official vuejs webpack template

Author: puxxustc

build/build.js

@@ -1,13 +1,16 @@
 // https://github.com/shelljs/shelljs
 'use strict'
 
+require('./check-versions')()
 require('shelljs/global')
+
 env.NODE_ENV = 'production'
 
-const path = require('path')
-const config = require('../config')
 const ora = require('ora')
+const path = require('path')
+const chalk = require('chalk')
 const webpack = require('webpack')
+const config = require('../config')
 const webpackConfig = require('./webpack.prod.conf')
 
 const spinner = ora('building for production...')
@@ -16,7 +19,7 @@ spinner.start()
 const assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
 rm('-rf', assetsPath)
 mkdir('-p', assetsPath)
-cp('-R', 'assets/', assetsPath)
+cp('-R', 'assets/*', assetsPath)
 
 const compiler = webpack(webpackConfig)
 const ProgressPlugin = require('webpack/lib/ProgressPlugin')
@@ -31,5 +34,11 @@ compiler.run((err, stats) => {
     children: false,
     chunks: false,
     chunkModules: false
-  }) + '\n')
+  }) + '\n\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

@@ -0,0 +1,47 @@
+'use strict'
+
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+
+const exec = (cmd) => {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+  {
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  }
+]
+
+module.exports = () => {
+  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 ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    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/dev-server.js

@@ -1,5 +1,7 @@
 'use strict'
 
+require('./check-versions')()
+
 const path = require('path')
 const express = require('express')
 const webpack = require('webpack')
@@ -12,6 +14,8 @@ const webpackConfig = process.env.NODE_ENV === 'testing'
 
 // default port where dev server listens for incoming traffic
 const port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+const autoOpenBrowser = Boolean(config.dev.autoOpenBrowser)
 // Define HTTP proxies to your custom API backend
 // https://github.com/chimurai/http-proxy-middleware
 const proxyTable = config.dev.proxyTable
@@ -42,7 +46,7 @@ Object.keys(proxyTable).forEach(context => {
   if (typeof options === 'string') {
     options = { target: options }
   }
-  app.use(proxyMiddleware(context, options))
+  app.use(proxyMiddleware(options.filter || context, options))
 })
 
 // handle fallback for HTML5 history API
@@ -59,12 +63,20 @@ app.use(hotMiddleware)
 const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 app.use(staticPath, express.static('./assets'))
 
+const uri = 'http://localhost:' + port
+
+devMiddleware.waitUntilValid(() => {
+  console.log('> Listening at ' + uri + '\n')
+})
+
 module.exports = app.listen(port, err => {
   if (err) {
     console.log(err)
     return
   }
-  const uri = 'http://localhost:' + port
-  console.log('Listening at ' + uri + '\n')
-  opn(uri)
+
+  // when env is testing, don't need open it
+  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+    opn(uri)
+  }
 })

build/utils.js

@@ -14,8 +14,8 @@ exports.assetsPath = _path => {
 exports.cssLoaders = options => {
   options = options || {}
   // generate loader string to be used with extract text plugin
-  function generateLoaders (loaders) {
-    const sourceLoader = loaders.map(function (loader) {
+  const generateLoaders = loaders => {
+    const sourceLoader = loaders.map(loader => {
       let extraParamChar
       if (/\?/.test(loader)) {
         loader = loader.replace(/\?/, '-loader?')
@@ -27,10 +27,12 @@ exports.cssLoaders = options => {
       return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
     }).join('!')
 
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
     if (options.extract) {
       return ExtractTextPlugin.extract({
-        fallbackLoader: 'style-loader',
-        loader: sourceLoader
+        use: sourceLoader,
+        fallback: 'vue-style-loader'
       })
     } else {
       return ['vue-style-loader', sourceLoader].join('!')
@@ -53,7 +55,7 @@ exports.cssLoaders = options => {
 exports.styleLoaders = options => {
   const output = []
   const loaders = exports.cssLoaders(options)
-  for (const extension in loaders) {
+  for (const extension of Object.keys(loaders)) {
     const loader = loaders[extension]
     output.push({
       test: new RegExp('\\.' + extension + '$'),

build/vue-loader.conf.js

@@ -0,0 +1,18 @@
+'use strict'
+
+const utils = require('./utils')
+const config = require('../config')
+
+const isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap,
+    extract: isProduction
+  }),
+  postcss: [
+    require('autoprefixer')({
+      browsers: ['last 3 versions']
+    })
+  ]
+}

build/webpack.base.conf.js

@@ -1,13 +1,10 @@
 'use strict'
 
 const path = require('path')
-const webpack = require('webpack')
 const config = require('../config')
 const utils = require('./utils')
 const projectRoot = path.resolve(__dirname, '../')
 
-const isProduction = process.env.NODE_ENV === 'production'
-
 module.exports = {
   entry: {
     app: ['./client/index.js'],
@@ -17,7 +14,9 @@ module.exports = {
   },
   output: {
     path: config.build.assetsRoot,
-    publicPath: isProduction ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath,
     filename: '[name].js'
   },
   resolve: {
@@ -39,22 +38,19 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /\.vue$/,
-        loader: 'eslint-loader',
-        include: projectRoot,
-        exclude: /node_modules/,
-        enforce: 'pre'
-      },
-      {
-        test: /\.js$/,
+        test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         include: projectRoot,
         exclude: /node_modules/,
-        enforce: 'pre'
+        enforce: 'pre',
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
       },
       {
         test: /\.vue$/,
-        loader: 'vue-loader'
+        loader: 'vue-loader',
+        options: require('./vue-loader.conf')
       },
       {
         test: /\.js$/,
@@ -81,21 +77,6 @@ module.exports = {
       }
     ]
   },
-  plugins: [
-    new webpack.LoaderOptionsPlugin({
-      vue: {
-        loaders: utils.cssLoaders({
-          sourceMap: isProduction,
-          extract: isProduction
-        }),
-        postcss: [
-          require('autoprefixer')({
-            browsers: ['last 3 versions']
-          })
-        ]
-      }
-    })
-  ],
   // See https://github.com/webpack/webpack/issues/3486
   performance: {
     hints: false

build/webpack.dev.conf.js

@@ -23,7 +23,6 @@ module.exports = merge(baseWebpackConfig, {
       'process.env': config.dev.env
     }),
     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-    new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
     // extract vendor chunks for better caching

build/webpack.prod.conf.js

@@ -45,7 +45,6 @@ const webpackConfig = merge(baseWebpackConfig, {
         comments: false
       }
     }),
-    new webpack.optimize.OccurrenceOrderPlugin(),
     // extract css into its own file
     new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
     // generate dist index.html with correct asset hash for caching.

config/index.js

@@ -21,6 +21,7 @@ module.exports = {
   dev: {
     env: require('./dev.env'),
     port: process.env.DEV_PORT || 8080,
+    autoOpenBrowser: true,
     assetsSubDirectory: 'assets',
     assetsPublicPath: '/',
     proxyTable: {},

package.json

@@ -86,6 +86,7 @@
     "electron-devtools-installer": "^2.0.1",
     "eslint": "^3.12.2",
     "eslint-config-standard": "^6.1.0",
+    "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.6.1",
     "eslint-plugin-html": "^1.7.0",
     "eslint-plugin-promise": "^3.4.0",
@@ -109,7 +110,7 @@
     "stylus-loader": "^2.4.0",
     "url-loader": "^0.5.7",
     "vue-html-loader": "^1.2.3",
-    "vue-loader": "^10.0.2",
+    "vue-loader": "^11.0.0",
     "vue-template-compiler": "2.1.10",
     "webpack": "2.2.0",
     "webpack-dev-middleware": "^1.9.0",