Initial webpack v4 compatibility

Author: SpaceK33z

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,9 @@ if (importLocal(__filename)) {
 const Server = require('../lib/Server');
 const webpack = require('webpack'); // eslint-disable-line
 
+// webpack has a nice message when webpack-cli is not installed, by requiring it we can also show that
+require('webpack/bin/webpack');
+
 function versionInfo() {
   return `webpack-dev-server ${require('../package.json').version}\n` +
   `webpack ${require('webpack/package.json').version}`;
@@ -51,7 +54,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 +223,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

@@ -3,6 +3,7 @@
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
 module.exports = {
+  mode: 'development',
   module: {
     rules: [
       {
@@ -16,7 +17,5 @@ module.exports = {
       }
     ]
   },
-  plugins: [
-    new UglifyJSPlugin()
-  ]
+  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

@@ -5,6 +5,7 @@ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
+  mode: 'development',
   module: {
     rules: [
       {
@@ -17,10 +18,8 @@ module.exports = {
         ]
       },
       {
-        test: /\.pug$/,
-        use: [
-          'pug-loader?self'
-        ]
+        test: /\.html$/,
+        use: ['html-loader'],
       },
       {
         test: /\.css$/,

client-src/live/webpack.config.js

@@ -4,6 +4,7 @@
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
 module.exports = {
+  mode: 'development',
   output: {
     library: 'SockJS',
     libraryTarget: 'umd'

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) => {