Merge branch 'master' into master

.github/ISSUE_TEMPLATE.md

@@ -13,8 +13,9 @@ questions, and support requests will be closed._
 
 <!-- Please place an x, no spaces, in all [ ] that apply -->
 
-- [ ] This is a **feature** request
 - [ ] This is a **bug**
+- [ ] This is a **feature** request
+- [ ] This is a **modification** request
 
 ### Code
 

README.md

@@ -1,4 +1,8 @@
-# webpack-dev-server
+<div align="center">
+  <a href="https://github.com/webpack/webpack">
+    <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
+  </a>
+</div>
 
 [![npm][npm]][npm-url]
 [![node][node]][node-url]
@@ -7,62 +11,137 @@
 [![coverage][cover]][cover-url]
 [![chat][chat]][chat-url]
 
-<div align="center">
-  <a href="https://github.com/webpack/webpack">
-    <img width="200" height="200"
-      src="https://webpack.js.org/assets/icon-square-big.svg">
-  </a>
-  <h1>webpack Dev Server</h1>
-</div>
+# webpack-dev-server
 
-Use [webpack](https://webpack.js.org) with a development server that provides live reloading. This should be used for **development only**.
+Use [webpack](https://webpack.js.org) with a development server that provides
+live reloading. This should be used for **development only**.
 
-It uses [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) under the hood, which provides fast in-memory access to the webpack assets.
+It uses [webpack-dev-middleware][middleware-url] under the hood, which provides
+fast in-memory access to the webpack assets.
 
-<h2 align="center">Install</h2>
+## Getting Started
 
-```
+First thing's first, install the module:
+
+```console
 npm install webpack-dev-server --save-dev
 ```
 
-<h2 align="center">Usage</h2>
+_Note: While you can install and run webpack-dev-server globally, we recommend
+installing it locally. webpack-dev-server will always use a local installation
+over a global one._
 
-The easiest way to use it is with the CLI. In the directory where your `webpack.config.js` is, run:
+## Usage
 
-```
+There are two main, recommended methods of using the module:
+
+### With the CLI
+
+The easiest way to use it is with the CLI. In the directory where your
+`webpack.config.js` is, run:
+
+```console
 node_modules/.bin/webpack-dev-server
 ```
 
-This will start a server, listening on connections from `localhost` on port `8080`.
+### With NPM Scripts
+
+NPM package.json scripts are a convenient and useful means to run locally installed
+binaries without having to be concerned about their full paths. Simply define a
+script as such:
+
+```json
+"scripts": {
+  "start:dev": "webpack-dev-server"
+}
+```
+
+And run the following in your terminal/console:
+
+```console
+npm run start:dev
+```
+
+NPM will automagically reference the binary in `node_modules` for you, and
+execute the file or command.
+
+### The Result
+
+Either method will start a server instance and begin listening for connections
+from `localhost` on port `8080`.
+
+webpack-dev-server is configured by default to support live-reload of files as
+you edit your assets while the server is running.
+
+See [**the documentation**][docs-url] for more use cases and options.
+
+## Caveats
+
+Version 2.8.0 introduced a change which included ES6 keywords `const` and `let`
+within the scripts being served to the browser. This effects environments which
+support _no ES6 whatsoever_, including older versions of UglifyJS and Internet
+Explorer. This was not considered a breaking change at the time due to official
+support for oldIE ending in 2016, rather this was seen as a maintenance update.
+Those wishing to support oldIE should stick with version 2.7.1.
 
-Now, when you change something in your assets, it should live-reload the files.
+For version 2.8.0+ those using UglifyJS in their webpack configs should use the
+beta version of [uglifyjs-webpack-plugin][uglify-url] independently, and _not_
+the built-in plugin. This will change once the new version is out of beta.
 
-See [**the documentation**](https://webpack.js.org/configuration/dev-server/#devserver) for more use cases and options.
+## Support
 
-<h2 align="center">Contributing</h2>
+We do our best to keep Issues in the repository focused on bugs, features, and
+needed modifications to the code for the module. Because of that, we ask users
+with general support, "how-to", or "why isn't this working" questions to try one
+of the other support channels that are available.
 
-We appreciate all help! Check out [CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to help.
+Your first-stop-shop for support for webpack-dev-server should by the excellent
+[documentation][docs-url] for the module. If you see an opportunity for improvement
+of those docs, please head over to the [webpack.js.org repo][wjo-url] and open a
+pull request.
 
-<h2 align="center">Maintainers</h2>
+From there, we encourage users to visit the [webpack Gitter chat][chat-url] and
+talk to the fine folks there. If your quest for answers comes up dry in chat,
+head over to [StackOverflow][stack-url] and do a quick search or open a new
+question. Remember; It's always much easier to answer questions that include your
+`webpack.config.js` and relevant files!
+
+If you're twitter-savvy you can tweet [#webpack][hash-url] with your question
+and someone should be able to reach out and lend a hand.
+
+If you have discovered a :bug:, have a feature suggestion, of would like to see
+a modification, please feel free to create an issue on Github. _Note: The issue
+template isn't optional, so please be sure not to remove it, and please fill it
+out completely._
+
+## Contributing
+
+We welcome your contributions! Please have a read of [CONTRIBUTING.md](CONTRIBUTING.md) for more information on how to get involved.
+
+## Maintainers
 
 <table>
   <tbody>
     <tr>
       <td align="center">
-        <img width="150" height="150"
-        src="https://avatars.githubusercontent.com/SpaceK33z?v=3">
+        <img src="https://avatars.githubusercontent.com/SpaceK33z?v=4&s=150">
         <br />
         <a href="https://github.com/SpaceK33z">Kees Kluskens</a>
       </td>
+      <td align="center">
+        <img src="https://i.imgur.com/4v6pgxh.png">
+        <br />
+        <a href="https://github.com/shellscape">Andrew Powell</a>
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 align="center">Inspiration</h2>
+## Attribution
 
 This project is heavily inspired by [peerigon/nof5](https://github.com/peerigon/nof5).
 
-<h2 align="center">LICENSE</h2>
+## License
 
 #### [MIT](./LICENSE)
 
@@ -84,3 +163,10 @@ This project is heavily inspired by [peerigon/nof5](https://github.com/peerigon/
 
 [chat]: https://badges.gitter.im/webpack/webpack.svg
 [chat-url]: https://gitter.im/webpack/webpack
+
+[docs-url]: https://webpack.js.org/configuration/dev-server/#devserver
+[hash-url]: https://twitter.com/search?q=webpack
+[middleware-url]: https://github.com/webpack/webpack-dev-middleware
+[stack-url]: https://stackoverflow.com/questions/tagged/webpack-dev-server
+[uglify-url]: https://github.com/webpack-contrib/uglifyjs-webpack-plugin
+[wjo-url]: https://github.com/webpack/webpack.js.org

examples/node-api-middleware/server.js

@@ -9,7 +9,7 @@ const server = new WebpackDevServer(compiler, {
   stats: {
     colors: true
   },
-  setup(app) {
+  before(app) {
     app.use((req, res, next) => {
       console.log(`Using middleware for ${req.url}`);
       next();

lib/Server.js

@@ -321,11 +321,19 @@ function Server(compiler, options) {
       }
     },
 
+    before: () => {
+      if (typeof options.before === 'function') { options.before(app, this); }
+    },
+
     middleware: () => {
       // include our middleware to ensure it is able to handle '/index.html' request after redirect
       app.use(this.middleware);
     },
 
+    after: () => {
+      if (typeof options.after === 'function') { options.after(app, this); }
+    },
+
     headers: () => {
       app.all('*', this.setContentHeaders.bind(this));
     },
@@ -335,11 +343,14 @@ function Server(compiler, options) {
     },
 
     setup: () => {
-      if (typeof options.setup === 'function') { options.setup(app, this); }
+      if (typeof options.setup === 'function') {
+        log('The `setup` option is deprecated and will be removed in v3. Please update your config to use `before`');
+        options.setup(app, this);
+      }
     }
   };
 
-  const defaultFeatures = ['setup', 'headers', 'middleware'];
+  const defaultFeatures = ['before', 'setup', 'headers', 'middleware'];
   if (options.proxy) { defaultFeatures.push('proxy', 'middleware'); }
   if (contentBase !== false) { defaultFeatures.push('contentBaseFiles'); }
   if (options.watchContentBase) { defaultFeatures.push('watchContentBase'); }
@@ -351,6 +362,7 @@ function Server(compiler, options) {
   if (contentBase !== false) { defaultFeatures.push('contentBaseIndex'); }
   // compress is placed last and uses unshift so that it will be the first middleware used
   if (options.compress) { defaultFeatures.unshift('compress'); }
+  if (options.after) { defaultFeatures.push('after'); }
 
   (options.features || defaultFeatures).forEach((feature) => {
     features[feature]();

lib/optionsSchema.json

@@ -271,6 +271,14 @@
       "description": "Exposes the Express server to add custom middleware or routes.",
       "instanceof": "Function"
     },
+    "before": {
+      "description": "Exposes the Express server to add custom middleware or routes before webpack-dev-middleware will be added.",
+      "instanceof": "Function"
+    },
+    "after": {
+      "description": "Exposes the Express server to add custom middleware or routes after webpack-dev-middleware got added.",
+      "instanceof": "Function"
+    },
     "stats": {
       "description": "Decides what bundle information is displayed.",
       "anyOf": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-server",
-  "version": "2.8.2",
+  "version": "2.9.1",
   "description": "Serves a webpack app. Updates the browser on changes.",
   "license": "MIT",
   "repository": "webpack/webpack-dev-server",

test/Validation.test.js

@@ -51,7 +51,7 @@ describe('Validation', () => {
       '   object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, ' +
       'watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, ' +
       'inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, ' +
-      'compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, ' +
+      'compress?, proxy?, historyApiFallback?, staticOptions?, setup?, before?, after?, stats?, reporter?, ' +
       'noInfo?, quiet?, serverSideRender?, index?, log?, warn? }'
     ]
   }];