1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
'use strict';
const path = require('path');
const config = require('./webpack.config');
const webpack = require('webpack');
const express = require('express');
const app = express();
const devMiddleware = require('webpack-dev-middleware');
const hotMiddleware = require('webpack-hot-middleware');
const { PORT } = process.env;
const port = PORT ? Number(PORT) : 3000;
config.entry.app.unshift('webpack-hot-middleware/client');
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
);
const compiler = webpack(config);
// webpack-dev-server config
const publicPath = config.output.publicPath;
const stats = {
colors: true,
version: false,
modulesSort: 'issuer',
assets: false,
cached: false,
cachedAssets: false,
chunks: false,
chunkModules: false
};
const options = { publicPath, stats };
const wdm = devMiddleware(compiler, options);
const whm = hotMiddleware(compiler);
app.use(wdm);
app.use(whm);
app.get('/_dev', (_req, res) => {
const outputPath = wdm.getFilenameFromUrl(options.publicPath || '/');
const filesystem = wdm.fileSystem;
const content = filesystem.readdirSync(outputPath);
res.end(content.join('\n'));
});
app.use('*', (_req, res, next) => {
const filename = path.join(compiler.outputPath, 'index.html');
compiler.outputFileSystem.readFile(filename, (err, result) => {
if (err) return next(err);
res.set('content-type', 'text/html');
res.send(result);
res.end();
});
});
const host = '0.0.0.0';
app.listen(port, host, () => {
console.log(`>> Listening at http://${host}:${port}`);
});
wdm.waitUntilValid(() => {
console.log(
`
>> Build ready at:
http://${host}:${port}
http://127.0.0.1:${port}
http://localhost:${port}
`
);
});
|
