chore(v2): webpack-serve -> webpack-dev-server (#1303)

* chore(v2): webpack-serve -> webpack-dev-server

* Update start.js

packages/docusaurus/lib/commands/start.js

@@ -7,18 +7,16 @@
 
 const _ = require('lodash');
 const path = require('path');
-const fs = require('fs-extra');
 const chalk = require('chalk');
 const webpack = require('webpack');
 const chokidar = require('chokidar');
-const convert = require('koa-connect');
-const range = require('koa-range');
-const mount = require('koa-mount');
-const serveStatic = require('koa-static');
-const history = require('connect-history-api-fallback');
 const portfinder = require('portfinder');
-const serve = require('webpack-serve');
+const openBrowser = require('react-dev-utils/openBrowser');
+const {prepareUrls} = require('react-dev-utils/WebpackDevServerUtils');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
+const WebpackDevServer = require('webpack-dev-server');
+const {normalizeUrl} = require('@docusaurus/utils');
 const load = require('../load');
 const loadConfig = require('../load/config');
 const createClientConfig = require('../webpack/client');
@@ -35,7 +33,7 @@ async function getPort(reqPort) {
 }
 
 module.exports = async function start(siteDir, cliOptions = {}) {
-  console.log('Start command invoked ...');
+  console.log(chalk.blue('Starting the development server...\n'));
 
   // Process all related files as a prop.
   const props = await load(siteDir);
@@ -69,15 +67,19 @@ module.exports = async function start(siteDir, cliOptions = {}) {
     );
   }
 
+  const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
   const port = await getPort(cliOptions.port);
-  const hotPort = await getPort(port + 1);
   const host = getHost(cliOptions.host);
   const {baseUrl} = props;
+  const urls = prepareUrls(protocol, host, port);
+  const openUrl = normalizeUrl([urls.localUrlForBrowser, baseUrl]);
 
   // Create compiler from generated webpack config.
   let config = createClientConfig(props);
 
   const {siteConfig, plugins = []} = props;
+  // Needed for hot reload.
+  config.plugin('hmr').use(HotModuleReplacementPlugin);
   config.plugin('html-webpack-plugin').use(HtmlWebpackPlugin, [
     {
       inject: false,
@@ -97,43 +99,40 @@ module.exports = async function start(siteDir, cliOptions = {}) {
     config = applyConfigureWebpack(configureWebpack, config, false);
   });
 
-  const compiler = webpack(config);
-
-  // Run webpack serve.
-  await serve(
-    {},
-    {
-      compiler,
-      open: true,
-      devMiddleware: {
-        logLevel: 'silent',
+  // https://webpack.js.org/configuration/dev-server
+  const devServerConfig = {
+    compress: true,
+    clientLogLevel: 'error',
+    hot: true,
+    quiet: true,
+    headers: {
+      'access-control-allow-origin': '*', // Needed for CORS.
     },
-      hotClient: {
-        port: hotPort,
-        logLevel: 'error',
+    publicPath: baseUrl,
+    watchOptions: {
+      ignored: /node_modules/,
     },
-      logLevel: 'error',
-      port,
-      host,
-      add: app => {
-        // Serve static files.
-        const staticDir = path.resolve(siteDir, 'static');
-        if (fs.existsSync(staticDir)) {
-          app.use(mount(baseUrl, serveStatic(staticDir)));
-        }
-
-        // Enable HTTP range requests.
-        app.use(range);
-
-        // Rewrite request to `/` since dev is only a SPA.
-        app.use(
-          convert(
-            history({
+    historyApiFallback: {
       rewrites: [{from: /\.html$/, to: '/'}],
-            }),
-          ),
-        );
     },
-    },
-  );
+    disableHostCheck: true,
+    overlay: false,
+    host,
+    contentBase: path.resolve(siteDir, 'static'),
+  };
+  WebpackDevServer.addDevServerEntrypoints(config, devServerConfig);
+  const compiler = webpack(config);
+  const devServer = new WebpackDevServer(compiler, devServerConfig);
+  devServer.listen(port, host, err => {
+    if (err) {
+      console.log(err);
+    }
+    openBrowser(openUrl);
+  });
+  ['SIGINT', 'SIGTERM'].forEach(sig => {
+    process.on(sig, () => {
+      devServer.close();
+      process.exit();
+    });
+  });
 };

packages/docusaurus/lib/webpack/base.js

@@ -55,7 +55,7 @@ module.exports = function createBaseConfig(props, isServer) {
     .mode(isProd ? 'production' : 'development')
     .output.path(outDir)
     .filename(isProd ? '[name].[chunkhash].js' : '[name].js')
-    .publicPath(isProd ? baseUrl : '/');
+    .publicPath(baseUrl);
 
   if (!isProd) {
     config.devtool('cheap-module-eval-source-map');

packages/docusaurus/package.json

@@ -43,7 +43,6 @@
     "classnames": "^2.2.6",
     "clean-webpack-plugin": "^0.1.19",
     "commander": "^2.16.0",
-    "connect-history-api-fallback": "^1.5.0",
     "css-loader": "^1.0.0",
     "docsearch.js": "^2.5.2",
     "ejs": "^2.6.1",
@@ -51,15 +50,12 @@
     "fs-extra": "^7.0.0",
     "globby": "^8.0.1",
     "html-webpack-plugin": "^3.2.0",
-    "koa-connect": "^2.0.1",
-    "koa-mount": "^3.0.0",
-    "koa-range": "^0.3.0",
-    "koa-static": "^5.0.0",
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.11",
     "mini-css-extract-plugin": "^0.4.1",
     "portfinder": "^1.0.13",
     "prismjs": "^1.15.0",
+    "react-dev-utils": "^8.0.0",
     "react-helmet": "^5.2.0",
     "react-loadable": "^5.5.0",
     "react-router-config": "^1.0.0-beta.4",
@@ -72,9 +68,9 @@
     "terser-webpack-plugin": "^1.1.0",
     "webpack": "^4.26.0",
     "webpack-chain": "^4.8.0",
+    "webpack-dev-server": "^3.2.1",
     "webpack-merge": "^4.1.4",
     "webpack-nicelog": "^2.3.1",
-    "webpack-serve": "^2.0.2",
     "webpack-stats-plugin": "^0.2.1"
   },
   "peerDependencies": {

website/package.json

@@ -13,8 +13,8 @@
     "@docusaurus/plugin-content-pages": "^1.0.0",
     "classnames": "^2.2.6",
     "docusaurus-2": "^2.0.0",
-    "react-youtube": "^7.9.0",
     "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react-dom": "^16.8.4",
+    "react-youtube": "^7.9.0"
   }
 }