Switch to webpack-dev-server (close #964)

template/build/utils.js

@@ -2,6 +2,7 @@
 const path = require('path')
 const config = require('../config')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const pkg = require('../package.json')
 
 exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
@@ -70,3 +71,23 @@ exports.styleLoaders = function (options) {
  }
  return output
 }
+
+exports.createNotifierCallback = function () {
+ const notifier = require('node-notifier')
+
+ return (severity, errors) => {
+ if (severity !== 'error') {
+ return
+ }
+ console.log('it should notify!!')
+ const error = errors[0]
+
+ const filename = error.file.split('!').pop()
+ notifier.notify({
+ title: pkg.name,
+ message: severity + ': ' + error.name,
+ subtitle: filename || '',
+ icon: path.join(__dirname, 'logo.png')
+ })
+ }
+}

template/build/webpack.base.conf.js

@@ -31,15 +31,16 @@ module.exports = {
  module: {
  rules: [
  {{#lint}}
- {
+ ...(config.dev.useEslint? [{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
- formatter: require('eslint-friendly-formatter')
+ formatter: require('eslint-friendly-formatter'),
+ emitWaring: !config.dev.showEslintErrorsInOverlay
  }
- },
+ }] : []),
  {{/lint}}
  {
  test: /\.vue$/,

template/build/webpack.dev.conf.js

@@ -6,18 +6,31 @@ const merge = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
 
-// add hot-reload related code to entry chunks
-Object.keys(baseWebpackConfig.entry).forEach(function (name) {
- baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
-})
-
-module.exports = merge(baseWebpackConfig, {
+const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#cheap-module-eval-source-map',
+
+ // these devServer options should be customized in /config/index.js
+ devServer: {
+ host: process.env.HOST || config.dev.host,
+ port: process.env.PORT || config.dev.port,
+ open: config.dev.autoOpenBrowser,
+ overlay: config.dev.errorOverlay ? {
+ warnings: true,
+ errors: true,
+ } : false,
+ publicPath: config.dev.assetsPublicPath,
+ proxy: config.dev.proxyTable,
+ quiet: true, // necessary for FriendlyErrorsPlugin
+ watchOptions: {
+ poll: config.dev.poll,
+ }
+ },
  plugins: [
  new webpack.DefinePlugin({
  'process.env': config.dev.env
@@ -34,3 +47,29 @@ module.exports = merge(baseWebpackConfig, {
  new FriendlyErrorsPlugin()
  ]
 })
+
+module.exports = new Promise((resolve, reject) => {
+ portfinder.basePort = process.env.PORT || config.dev.port
+ portfinder.getPort((err, port) => {
+ if (err) {
+ reject(err)
+ } else {
+ // publish the new Port, necessary for e2e tests
+ process.env.PORT = port
+ // add port to devServer config
+ devWebpackConfig.devServer.port = port
+
+ // Add FriendlyErrorsPlugin
+ devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+ compilationSuccessInfo: {
+ messages: [`You application is running here http://${config.dev.host}:${port}`],
+ },
+ onErrors: config.dev.notifyOnErrors
+ ? utils.createNotifierCallback()
+ : undefined
+ }))
+
+ resolve(devWebpackConfig)
+ }
+ })
+})

template/config/index.js

@@ -5,37 +5,59 @@
 const path = require('path')
 
 module.exports = {
+ dev: {
+ env: require('./dev.env'),
+ host: 'localhost', // can be overwritten by process.env.HOST
+ port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined
+
+ // Paths
+ assetsSubDirectory: 'static',
+ assetsPublicPath: '/',
+ proxyTable: {},
+
+ // Various Dev Server settings
+ autoOpenBrowser: false,
+ errorOverlay: true,
+ notifyOnErrors: true,
+ poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+ // Use Eslint Loader?
+ // If true, your code will be linted during bundling and
+ // linting errors and warings will be shown in the console.
+ useEslint: true,
+ // If true, eslint errors and warings will also be shown in the error overlay
+ // in the browser.
+ showEslintErrorsInOverlay: false,
+
+ // CSS Sourcemaps off by default because relative paths are "buggy"
+ // with this option, according to the CSS-Loader README
+ // (https://github.com/webpack/css-loader#sourcemaps)
+ // In our experience, they generally work as expected,
+ // just be aware of this issue when enabling this option.
+ cssSourceMap: false
+ },
  build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
+
+ // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
+
  productionSourceMap: true,
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
+
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
+
  bundleAnalyzerReport: process.env.npm_config_report
- },
- dev: {
- env: require('./dev.env'),
- port: process.env.PORT || 8080,
- autoOpenBrowser: true,
- assetsSubDirectory: 'static',
- assetsPublicPath: '/',
- proxyTable: {},
- // CSS Sourcemaps off by default because relative paths are "buggy"
- // with this option, according to the CSS-Loader README
- // (https://github.com/webpack/css-loader#sourcemaps)
- // In our experience, they generally work as expected,
- // just be aware of this issue when enabling this option.
- cssSourceMap: false
  }
 }

template/package.json

@@ -5,7 +5,7 @@
  "author": "{{ author }}",
  "private": true,
  "scripts": {
- "dev": "node build/dev-server.js",
+ "dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"{{#unit}},
  "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"{{/unit}}{{#e2e}},
@@ -29,7 +29,6 @@
  "babel-preset-stage-2": "^6.22.0",
  "babel-register": "^6.22.0",
  "chalk": "^2.0.1",
- "connect-history-api-fallback": "^1.3.0",
  "copy-webpack-plugin": "^4.0.1",
  "css-loader": "^0.28.0",
  {{#lint}}
@@ -51,12 +50,10 @@
  {{/if_eq}}
  {{/lint}}
  "eventsource-polyfill": "^0.9.6",
- "express": "^4.14.1",
  "extract-text-webpack-plugin": "^3.0.0",
  "file-loader": "^1.1.4",
  "friendly-errors-webpack-plugin": "^1.6.1",
  "html-webpack-plugin": "^2.30.1",
- "http-proxy-middleware": "^0.17.3",
  "webpack-bundle-analyzer": "^2.9.0",
  {{#unit}}
  "cross-env": "^5.0.1",
@@ -70,6 +67,7 @@
  "karma-spec-reporter": "0.0.31",
  "karma-webpack": "^2.0.2",
  "mocha": "^3.2.0",
+ "node-notifier": "^5.1.2",
  "chai": "^4.1.2",
  "sinon": "^4.0.0",
  "sinon-chai": "^2.8.0",
@@ -85,7 +83,6 @@
  {{/e2e}}
  "semver": "^5.3.0",
  "shelljs": "^0.7.6",
- "opn": "^5.1.0",
  "optimize-css-assets-webpack-plugin": "^3.2.0",
  "ora": "^1.2.0",
  "rimraf": "^2.6.0",
@@ -95,8 +92,7 @@
  "vue-template-compiler": "^2.4.2",
  "portfinder": "^1.0.13",
  "webpack": "^3.6.0",
- "webpack-dev-middleware": "^1.12.0",
- "webpack-hot-middleware": "^2.18.2",
+ "webpack-dev-server": "^2.9.1",
  "webpack-merge": "^4.1.0"
  },
  "engines": {