Switch to webpack-dev-server (close vuejs-templates#964) (vuejs-templ…

…ates#975)

* Finished testable version.

* close vuejs-templates#960

* fix node-notifier version

* remove console.log

* moved general dependency out of unit test-only dependency block.

* fix typo

* ignore /test folder

* make HMR work correctly.

* improve console messages for HMR - now show filenames of replaced modules.

* fix typo in eslint-loader config

* move imports for the env files from /config/index.js directly into the webpack config.

Reasoning: thosen file imports are not configuration, so they don't belong inside of config/index.js

* fix wrong overlay config

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 .DS_Store
 docs/_book
-test
+test/

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,22 @@ exports.styleLoaders = function (options) {
  }
  return output
 }
+
+exports.createNotifierCallback = function () {
+ const notifier = require('node-notifier')
+
+ return (severity, errors) => {
+ if (severity !== 'error') {
+ return
+ }
+ 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'),
+ emitWarning: !config.dev.showEslintErrorsInOverlay
  }
- },
+ }] : []),
  {{/lint}}
  {
  test: /\.vue$/,

template/build/webpack.dev.conf.js

@@ -6,24 +6,38 @@ 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: {
+ hot: true,
+ host: process.env.HOST || config.dev.host,
+ port: process.env.PORT || config.dev.port,
+ open: config.dev.autoOpenBrowser,
+ overlay: config.dev.errorOverlay ? {
+ warnings: false,
+ 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
- }),
- // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+ 'process.env': require('../config/dev.env')
+ }), 
  new webpack.HotModuleReplacementPlugin(),
+ new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
@@ -34,3 +48,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: [`Your application is running here: http://${config.dev.host}:${port}`],
+ },
+ onErrors: config.dev.notifyOnErrors
+ ? utils.createNotifierCallback()
+ : undefined
+ }))
+
+ resolve(devWebpackConfig)
+ }
+ })
+})

template/build/webpack.prod.conf.js

@@ -12,7 +12,7 @@ const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 
 const env = {{#if_or unit e2e}}process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
- : {{/if_or}}config.build.env
+ : {{/if_or}}require('../config/prod.env')
 
 const webpackConfig = merge(baseWebpackConfig, {
  module: {

template/config/index.js

@@ -5,37 +5,58 @@
 const path = require('path')
 
 module.exports = {
+ dev: {
+ 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'),
+ // Template for index.html
  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 --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",
@@ -77,6 +74,7 @@
  "babel-plugin-istanbul": "^4.1.1",
  "phantomjs-prebuilt": "^2.1.14",
  {{/unit}}
+ "node-notifier": "^5.1.2",
  {{#e2e}}
  "chromedriver": "^2.27.2",
  "cross-spawn": "^5.0.1",
@@ -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.5.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": {