Skip to content

Commit b3374c3

Browse files
alexander-akaitalexander-akait
authored
fix: /webpack-dev-server url shows list of files (#3101)
1 parent 5d0d5af commit b3374c3

File tree

7 files changed

+105
-105
lines changed

7 files changed

+105
-105
lines changed

‎lib/Server.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,14 @@ class Server {
6767
this.setupApp();
6868
this.setupCheckHostRoute();
6969
this.setupDevMiddleware();
70+
71+
// Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
72+
routes(this);
73+
7074
this.setupFeatures();
7175
this.setupHttps();
7276
this.createServer();
7377

74-
routes(this);
7578
killable(this.server);
7679
setupExitSignals(this);
7780

‎lib/utils/routes.js

+38-72
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
const { createReadStream } = require('fs');
44
const { join } = require('path');
5-
const getPaths = require('webpack-dev-middleware/dist/utils/getPaths').default;
65

76
const clientBasePath = join(__dirname, '..', '..', 'client');
87

@@ -24,80 +23,47 @@ function routes(server) {
2423
});
2524

2625
app.get('/webpack-dev-server', (req, res) => {
27-
res.setHeader('Content-Type', 'text/html');
28-
29-
res.write(
30-
'<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>'
31-
);
32-
33-
const filesystem = middleware.context.outputFileSystem;
34-
const paths = getPaths(middleware.context);
35-
36-
for (const { publicPath, outputPath } of paths) {
37-
writeDirectory(publicPath, outputPath);
38-
}
39-
40-
res.end('</body></html>');
41-
42-
function writeDirectory(baseUrl, basePath) {
43-
if (baseUrl === 'auto') {
44-
baseUrl = '';
45-
}
46-
47-
const content = filesystem.readdirSync(basePath);
48-
49-
res.write('<ul>');
50-
51-
// sort file data so that files are listed before directories
52-
// this forces Windows to have consistent behavior, as it seems
53-
// to list directories first for the default memfs filesystem
54-
// of webpack-dev-middleware
55-
const fileData = content
56-
.map((item) => {
57-
const p = `${basePath}/${item}`;
58-
return {
59-
item,
60-
isFile: filesystem.statSync(p).isFile(),
61-
path: p,
62-
};
63-
})
64-
.sort((item1, item2) => {
65-
if (item1.isFile && !item2.isFile) {
66-
return -1;
67-
} else if (!item1.isFile && item2.isFile) {
68-
return 1;
69-
// sort alphabetically if both are files or directories
70-
} else if (item1.item < item2.item) {
71-
return -1;
72-
} else if (item2.item < item1.item) {
73-
return 1;
74-
}
75-
return 0;
76-
});
77-
78-
fileData.forEach((data) => {
79-
const { item, isFile, path: p } = data;
80-
81-
if (isFile) {
82-
res.write(`<li><a href="${baseUrl + item}">${item}</a></li>`);
83-
84-
if (/\.js$/.test(item)) {
85-
const html = item.substr(0, item.length - 3);
86-
const containerHref = baseUrl + html;
87-
88-
res.write(`<li><a href="${containerHref}">${html}</a>`);
89-
}
90-
} else {
91-
res.write(`<li>${item}<br>`);
92-
93-
writeDirectory(`${baseUrl + item}/`, p);
94-
95-
res.write('</li>');
26+
middleware.waitUntilValid((stats) => {
27+
res.setHeader('Content-Type', 'text/html');
28+
res.write(
29+
'<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>'
30+
);
31+
32+
const statsForPrint =
33+
typeof stats.stats !== 'undefined'
34+
? stats.toJson().children
35+
: [stats.toJson()];
36+
37+
res.write(`<h1>Assets Report:</h1>`);
38+
39+
statsForPrint.forEach((item, index) => {
40+
res.write('<div>');
41+
42+
const name =
43+
item.name || (stats.stats ? `unnamed[${index}]` : 'unnamed');
44+
45+
res.write(`<h2>Compilation: ${name}</h2>`);
46+
res.write('<ul>');
47+
48+
const publicPath = item.publicPath === 'auto' ? '' : item.publicPath;
49+
50+
for (const asset of item.assets) {
51+
const assetName = asset.name;
52+
const assetURL = `${publicPath}${assetName}`;
53+
54+
res.write(
55+
`<li>
56+
<strong><a href="${assetURL}" target="_blank">${assetName}</a></strong>
57+
</li>`
58+
);
9659
}
60+
61+
res.write('</ul>');
62+
res.write('</div>');
9763
});
9864

99-
res.write('</ul>');
100-
}
65+
res.end('</body></html>');
66+
});
10167
});
10268
}
10369

‎package-lock.json

+24-24
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
},
1616
"scripts": {
1717
"lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different",
18-
"lint:prettier:fix": "npm run lint:prettier -- --write",
1918
"lint:js": "eslint . --cache",
20-
"lint:js:fix": "npm run lint:js -- --fix",
2119
"lint": "npm-run-all -l -p \"lint:**\"",
22-
"lint:fix": "npm run lint:prettier:fix && npm run lint:js:fix",
2320
"lint:type": "tsc --noEmit",
21+
"fix:prettier": "npm run lint:prettier -- --write",
22+
"fix:js": "npm run lint:js -- --fix",
23+
"fix": "npm-run-all fix:js fix:prettier",
2424
"commitlint": "commitlint --from=master",
2525
"test:only": "jest --forceExit",
2626
"test:coverage": "npm run test:only -- --coverage",

‎test/fixtures/multi-public-path-config/baz.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
'use strict';
2+
3+
console.log('Hey.');

‎test/fixtures/multi-public-path-config/webpack.config.js

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
'use strict';
22

3+
const path = require('path');
4+
35
module.exports = [
46
{
57
mode: 'development',
@@ -10,7 +12,6 @@ module.exports = [
1012
filename: 'foo.js',
1113
publicPath: '/bundle1/',
1214
},
13-
node: false,
1415
infrastructureLogging: {
1516
level: 'warn',
1617
},
@@ -31,13 +32,26 @@ module.exports = [
3132
context: __dirname,
3233
entry: './bar.js',
3334
output: {
34-
path: __dirname,
35+
path: path.join(__dirname, 'named'),
3536
filename: 'bar.js',
3637
publicPath: '/bundle2/',
3738
},
38-
node: false,
39+
name: 'named',
40+
stats: 'none',
3941
infrastructureLogging: {
4042
level: 'warn',
4143
},
4244
},
45+
{
46+
mode: 'development',
47+
context: __dirname,
48+
entry: './bar.js',
49+
output: {
50+
path: path.join(__dirname, 'dist'),
51+
filename: 'bar.js',
52+
publicPath: 'auto',
53+
},
54+
name: 'other',
55+
stats: false,
56+
},
4357
];

‎test/server/utils/__snapshots__/routes.test.js.snap

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`routes util multi config should handle GET request to directory index and list all middleware directories 1`] = `"<!DOCTYPE html><html><head><meta charset=\\"utf-8\\"/></head><body><ul><li><a href=\\"/bundle1/bar.js\\">bar.js</a></li><li><a href=\\"/bundle1/bar\\">bar</a><li><a href=\\"/bundle1/foo.js\\">foo.js</a></li><li><a href=\\"/bundle1/foo\\">foo</a><li>path<br><ul><li>to<br><ul><li><a href=\\"/bundle1/path/to/file.html\\">file.html</a></li></ul></li></ul></li></ul><ul><li><a href=\\"/bundle2/bar.js\\">bar.js</a></li><li><a href=\\"/bundle2/bar\\">bar</a><li><a href=\\"/bundle2/foo.js\\">foo.js</a></li><li><a href=\\"/bundle2/foo\\">foo</a><li>path<br><ul><li>to<br><ul><li><a href=\\"/bundle2/path/to/file.html\\">file.html</a></li></ul></li></ul></li></ul></body></html>"`;
3+
exports[`routes util multi config should handle GET request to directory index and list all middleware directories 1`] = `
4+
"<!DOCTYPE html><html><head><meta charset=\\"utf-8\\"/></head><body><h1>Assets Report:</h1><div><h2>Compilation: unnamed[0]</h2><ul><li>
5+
<strong><a href=\\"/bundle1/foo.js\\" target=\\"_blank\\">foo.js</a></strong>
6+
</li><li>
7+
<strong><a href=\\"/bundle1/path/to/file.html\\" target=\\"_blank\\">path/to/file.html</a></strong>
8+
</li></ul></div><div><h2>Compilation: named</h2><ul><li>
9+
<strong><a href=\\"/bundle2/bar.js\\" target=\\"_blank\\">bar.js</a></strong>
10+
</li></ul></div><div><h2>Compilation: other</h2><ul><li>
11+
<strong><a href=\\"bar.js\\" target=\\"_blank\\">bar.js</a></strong>
12+
</li></ul></div></body></html>"
13+
`;
414
5-
exports[`routes util simple config should handle GET request to directory index 1`] = `"<!DOCTYPE html><html><head><meta charset=\\"utf-8\\"/></head><body><ul><li><a href=\\"main.js\\">main.js</a></li><li><a href=\\"main\\">main</a></ul></body></html>"`;
15+
exports[`routes util simple config should handle GET request to directory index 1`] = `
16+
"<!DOCTYPE html><html><head><meta charset=\\"utf-8\\"/></head><body><h1>Assets Report:</h1><div><h2>Compilation: unnamed</h2><ul><li>
17+
<strong><a href=\\"main.js\\" target=\\"_blank\\">main.js</a></strong>
18+
</li></ul></div></body></html>"
19+
`;

0 commit comments

Comments
 (0)