webpack · hiroppy · Jul 26, 2020 · Jul 6, 2020 · Jul 14, 2020 · Jul 15, 2020
diff --git a/lib/utils/createConfig.js b/lib/utils/createConfig.js
@@ -45,18 +45,6 @@ function createConfig(config, argv, { port }) {
 
   options.dev = options.dev || {};
 
-  if (!options.dev.publicPath) {
-    options.dev.publicPath =
-      (firstWpOpt.output && firstWpOpt.output.publicPath) || '';
-
-    if (
-      !isAbsoluteUrl(String(options.dev.publicPath)) &&
-      options.dev.publicPath[0] !== '/'
-    ) {
-      options.dev.publicPath = `/${options.dev.publicPath}`;
-    }
-  }
-
   if (!options.watchOptions && firstWpOpt.watchOptions) {
     options.watchOptions = firstWpOpt.watchOptions;
   }

diff --git a/lib/utils/routes.js b/lib/utils/routes.js
@@ -1,16 +1,14 @@
 'use strict';
 
 const { createReadStream } = require('fs');
-const { dirname, join } = require('path');
-const getFilenameFromUrl = require('webpack-dev-middleware/dist/utils/getFilenameFromUrl')
-  .default;
+const { join } = require('path');
+const getPaths = require('webpack-dev-middleware/dist/utils/getPaths').default;
 
 const clientBasePath = join(__dirname, '..', '..', 'client');
 
 function routes(server) {
   const app = server.app;
   const middleware = server.middleware;
-  const options = server.options;
 
   app.get('/__webpack_dev_server__/sockjs.bundle.js', (req, res) => {
     res.setHeader('Content-Type', 'application/javascript');
@@ -36,12 +34,12 @@ function routes(server) {
       '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>'
     );
 
-    const outputPath = dirname(
-      getFilenameFromUrl(middleware.context, options.dev.publicPath || '/')
-    );
     const filesystem = middleware.context.outputFileSystem;
+    const paths = getPaths(middleware.context);
 
-    writeDirectory(options.dev.publicPath || '/', outputPath);
+    for (const { publicPath, outputPath } of paths) {
+      writeDirectory(publicPath, outputPath);
+    }
 
     res.end('</body></html>');
 
@@ -50,10 +48,37 @@ function routes(server) {
 
       res.write('<ul>');
 
-      content.forEach((item) => {
-        const p = `${basePath}/${item}`;
+      // sort file data so that files are listed before directories
+      // this forces Windows to have consistent behavior, as it seems
+      // to list directories first for the default memfs filesystem
+      // of webpack-dev-middleware
+      const fileData = content
+        .map((item) => {
+          const p = `${basePath}/${item}`;
+          return {
+            item,
+            isFile: filesystem.statSync(p).isFile(),
+            path: p,
+          };
+        })
+        .sort((item1, item2) => {
+          if (item1.isFile && !item2.isFile) {
+            return -1;
+          } else if (!item1.isFile && item2.isFile) {
+            return 1;
+            // sort alphabetically if both are files or directories
+          } else if (item1.item < item2.item) {
+            return -1;
+          } else if (item2.item < item1.item) {
+            return 1;
+          }
+          return 0;
+        });
+
+      fileData.forEach((data) => {
+        const { item, isFile, path: p } = data;
 
-        if (filesystem.statSync(p).isFile()) {
+        if (isFile) {
           res.write(`<li><a href="${baseUrl + item}">${item}</a></li>`);
 
           if (/\.js$/.test(item)) {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
     "strip-ansi": "^6.0.0",
     "url": "^0.11.0",
     "util": "^0.12.3",
-    "webpack-dev-middleware": "^4.0.0-rc.2",
+    "webpack-dev-middleware": "^4.0.0-rc.3",
     "ws": "^7.3.1",
     "yargs": "^13.3.2"
   },

diff --git a/test/fixtures/multi-public-path-config/bar.js b/test/fixtures/multi-public-path-config/bar.js
@@ -0,0 +1,3 @@
+'use strict';
+
+console.log('Hey.');
diff --git a/test/fixtures/multi-public-path-config/foo.js b/test/fixtures/multi-public-path-config/foo.js
@@ -0,0 +1,3 @@
+'use strict';
+
+require('./test.html');
diff --git a/test/fixtures/multi-public-path-config/test.html b/test/fixtures/multi-public-path-config/test.html
@@ -0,0 +1 @@
+hello
diff --git a/test/fixtures/multi-public-path-config/webpack.config.js b/test/fixtures/multi-public-path-config/webpack.config.js
@@ -0,0 +1,43 @@
+'use strict';
+
+module.exports = [
+  {
+    mode: 'development',
+    context: __dirname,
+    entry: './foo.js',
+    output: {
+      path: __dirname,
+      filename: 'foo.js',
+      publicPath: '/bundle1/',
+    },
+    node: false,
+    infrastructureLogging: {
+      level: 'warn',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.html$/,
+          loader: 'file-loader',
+          options: {
+            name: 'path/to/file.html',
+          },
+        },
+      ],
+    },
+  },
+  {
+    mode: 'development',
+    context: __dirname,
+    entry: './bar.js',
+    output: {
+      path: __dirname,
+      filename: 'bar.js',
+      publicPath: '/bundle2/',
+    },
+    node: false,
+    infrastructureLogging: {
+      level: 'warn',
+    },
+  },
+];