Merge branch 'webpack-4'

Author: SpaceK33z

README.md

@@ -28,6 +28,8 @@ the [`before`](https://webpack.js.org/configuration/dev-server/#devserver-before
 and [`after`](https://webpack.js.org/configuration/dev-server/#devserver-after)
 hooks in the documentation.
 
+Use [webpack-serve](https://github.com/webpack-contrib/webpack-serve) for a fast alternative. Use webpack-dev-server if you need to test on old browsers.
+
 ## Getting Started
 
 First thing's first, install the module:

bin/webpack-dev-server.js

@@ -2,7 +2,7 @@
 
 'use strict';
 
-/* eslint global-require: off, import/order: off, no-console: off */
+/* eslint global-require: off, import/order: off, no-console: off, import/no-extraneous-dependencies: off */
 require('../lib/polyfills');
 
 const debug = require('debug')('webpack-dev-server');
@@ -24,6 +24,16 @@ if (importLocal(__filename)) {
 const Server = require('../lib/Server');
 const webpack = require('webpack'); // eslint-disable-line
 
+try {
+  require.resolve('webpack-cli');
+} catch (e) {
+  console.error('The CLI moved into a separate package: webpack-cli.');
+  console.error("Please install 'webpack-cli' in addition to webpack itself to use the CLI.");
+  console.error('-> When using npm: npm install webpack-cli -D');
+  console.error('-> When using yarn: yarn add webpack-cli -D');
+  process.exitCode = 1;
+}
+
 function versionInfo() {
   return `webpack-dev-server ${require('../package.json').version}\n` +
   `webpack ${require('webpack/package.json').version}`;
@@ -51,7 +61,7 @@ const defaultTo = (value, def) => value == null ? def : value;
 const yargs = require('yargs')
   .usage(`${versionInfo()}\nUsage: https://webpack.js.org/configuration/dev-server/`);
 
-require('webpack/bin/config-yargs')(yargs);
+require('webpack-cli/bin/config-yargs')(yargs);
 
 // It is important that this is done after the webpack yargs config,
 // so it overrides webpack's version info.
@@ -220,7 +230,7 @@ yargs.options({
 });
 
 const argv = yargs.argv;
-const wpOpt = require('webpack/bin/convert-argv')(yargs, argv, {
+const wpOpt = require('webpack-cli/bin/convert-argv')(yargs, argv, {
   outputFilename: '/bundle.js'
 });
 

client-src/default/webpack.config.js

@@ -1,8 +1,7 @@
 'use strict';
 
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
-
 module.exports = {
+  mode: 'production',
   module: {
     rules: [
       {
@@ -15,8 +14,5 @@ module.exports = {
         ]
       }
     ]
-  },
-  plugins: [
-    new UglifyJSPlugin()
-  ]
+  }
 };

client-src/live/index.js

@@ -11,7 +11,7 @@ let hot = false;
 let currentHash = '';
 
 $(() => {
-  $('body').html(require('./page.pug')());
+  $('body').html(require('./page.html')());
   const status = $('#status');
   const okness = $('#okness');
   const $errors = $('#errors');

client-src/live/page.html

@@ -0,0 +1,7 @@
+<div class="header">
+  <span id="okness"></span>
+  <span id="status"></span>
+</div>
+<pre id="errors"></pre>
+<div id="warnings"></div>
+<iframe id="iframe" src="javascript:;" allowfullscreen="allowfullscreen"></iframe>

client-src/live/page.pug

@@ -1,10 +1,10 @@
 'use strict';
 
 const path = require('path');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
+  mode: 'production',
   module: {
     rules: [
       {
@@ -17,10 +17,8 @@ module.exports = {
         ]
       },
       {
-        test: /\.pug$/,
-        use: [
-          'pug-loader?self'
-        ]
+        test: /\.html$/,
+        use: ['html-loader']
       },
       {
         test: /\.css$/,
@@ -32,7 +30,6 @@ module.exports = {
     ]
   },
   plugins: [
-    new UglifyJSPlugin(),
     new CopyPlugin([{
       from: path.resolve(__dirname, 'live.html'),
       to: path.resolve(__dirname, '../../client/live.html')

client-src/live/webpack.config.js

@@ -1,14 +1,9 @@
 'use strict';
 
-// eslint-disable-next-line
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
-
 module.exports = {
+  mode: 'production',
   output: {
     library: 'SockJS',
     libraryTarget: 'umd'
-  },
-  plugins: [
-    new UglifyJSPlugin()
-  ]
+  }
 };

client-src/sockjs/webpack.config.js

@@ -6,7 +6,7 @@ const { setup } = require('../../util');
 
 module.exports = setup({
   context: __dirname,
-  entry: ['./app.js', '../../client/index.js?http://localhost:8080/'],
+  entry: ['./app.js', '../../../client/index.js?http://localhost:8080/'],
   output: {
     filename: 'bundle.js'
   }

examples/api/middleware/webpack.config.js

@@ -10,7 +10,7 @@ const webpack = require('webpack');
 
 module.exports = {
   setup(config) {
-    const defaults = { plugins: [], devServer: {} };
+    const defaults = { mode: 'development', plugins: [], devServer: {} };
     const result = Object.assign(defaults, config);
     const before = function before(app) {
       app.get('/.assets/*', (req, res) => {