Node.js Angular 2，网页包，Express，HMR
我正在使用Webpack和HMR开发Angular 2应用程序。在这个阶段，存在一个与后端没有交互的静态应用程序。所有数据都是静态虚拟数据 现在是时候开始添加express/node后端了，这样我就可以与数据库交互了，但我不想失去HMR功能 是否可以将其设置为：Node.js Angular 2，网页包，Express，HMR,node.js,angular,webpack,Node.js,Angular,Webpack,我正在使用Webpack和HMR开发Angular 2应用程序。在这个阶段，存在一个与后端没有交互的静态应用程序。所有数据都是静态虚拟数据 现在是时候开始添加express/node后端了，这样我就可以与数据库交互了，但我不想失去HMR功能 是否可以将其设置为： 我可以使用express和jade从Node提供Angular 2应用程序 我对Angular 2应用程序进行了更改，HMR启动并将代码热交换到我的浏览器窗口中 目前，我的网页包设置分为三个文件（dev、prod、common）。我在下
webpack-dashboard -- webpack-dev-server --inline --hot --progress --port 8080
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
publicPath: 'http://localhost:8080/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'styles': './src/styles/main.scss',
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['', '.js', '.ts', 'scss']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['ts', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
}
,
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills', 'styles']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
var hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';
module.exports = {
context: __dirname,
// Include the hot middleware with each entry point
entry: {
// Add the client which connects to our middleware
'styles': ['../src/styles/main.scss', hotMiddlewareScript],
'polyfills': ['../src/app/polyfills.ts', hotMiddlewareScript],
'vendor': ['../src/app/vendor.ts', hotMiddlewareScript],
'manager': ['../src/app/main-manager.ts', hotMiddlewareScript],
'authenticator': ['../src/app/main-authenticator.ts', hotMiddlewareScript]
},
output: {
path: __dirname,
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
resolve: {
extensions: ['', '.js', '.ts', 'scss']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['ts', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['mainapp', 'vendor', 'polyfills', 'styles']
}),
//new HtmlWebpackPlugin({
// template: '../src/index.html'
//}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
};
/// <reference path="../typings/index.d.ts" />
let http = require('http');
let express = require('express');
let morgan = require('morgan');
let app = express();
app.use(morgan('short'));
app.set('view engine', 'pug');
// ************************************
// This is the real meat of the example
// ************************************
(function() {
let webpack = require('webpack');
let webpackDevMiddleWare = require('webpack-dev-middleware');
let webpackHotMiddleWare = require('webpack-hot-middleware');
// Step 1: Create & configure a webpack compiler
let webpackConfig = require(process.env.WEBPACK_CONFIG ? process.env.WEBPACK_CONFIG : '../webpack.config');
let compiler = webpack(webpackConfig);
// Step 2: Attach the dev middleware to the compiler & the server
app.use(webpackDevMiddleWare(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath
}));
// Step 3: Attach the hot middleware to the compiler & the server
app.use(webpackHotMiddleWare(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000
}));
})();
// Do anything you like with the rest of your express application.
app.get("/", function(req, res) {
res.sendFile(__dirname + '/app/index-manager.html');
});
app.get("/multientry", function(req, res) {
res.sendFile(__dirname + '/app/index-multientry.html');
});
if (require.main === module) {
let server = http.createServer(app);
server.listen(process.env.PORT || 4200, function() {
console.log("Listening on %j", server.address());
});
}
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
publicPath: 'http://localhost:8080/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'styles': './src/styles/main.scss',
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['', '.js', '.ts', 'scss']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['ts', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
}
,
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills', 'styles']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
var hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';
module.exports = {
context: __dirname,
// Include the hot middleware with each entry point
entry: {
// Add the client which connects to our middleware
'styles': ['../src/styles/main.scss', hotMiddlewareScript],
'polyfills': ['../src/app/polyfills.ts', hotMiddlewareScript],
'vendor': ['../src/app/vendor.ts', hotMiddlewareScript],
'manager': ['../src/app/main-manager.ts', hotMiddlewareScript],
'authenticator': ['../src/app/main-authenticator.ts', hotMiddlewareScript]
},
output: {
path: __dirname,
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
resolve: {
extensions: ['', '.js', '.ts', 'scss']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['ts', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['mainapp', 'vendor', 'polyfills', 'styles']
}),
//new HtmlWebpackPlugin({
// template: '../src/index.html'
//}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
};
/// <reference path="../typings/index.d.ts" />
let http = require('http');
let express = require('express');
let morgan = require('morgan');
let app = express();
app.use(morgan('short'));
app.set('view engine', 'pug');
// ************************************
// This is the real meat of the example
// ************************************
(function() {
let webpack = require('webpack');
let webpackDevMiddleWare = require('webpack-dev-middleware');
let webpackHotMiddleWare = require('webpack-hot-middleware');
// Step 1: Create & configure a webpack compiler
let webpackConfig = require(process.env.WEBPACK_CONFIG ? process.env.WEBPACK_CONFIG : '../webpack.config');
let compiler = webpack(webpackConfig);
// Step 2: Attach the dev middleware to the compiler & the server
app.use(webpackDevMiddleWare(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath
}));
// Step 3: Attach the hot middleware to the compiler & the server
app.use(webpackHotMiddleWare(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000
}));
})();
// Do anything you like with the rest of your express application.
app.get("/", function(req, res) {
res.sendFile(__dirname + '/app/index-manager.html');
});
app.get("/multientry", function(req, res) {
res.sendFile(__dirname + '/app/index-multientry.html');
});
if (require.main === module) {
let server = http.createServer(app);
server.listen(process.env.PORT || 4200, function() {
console.log("Listening on %j", server.address());
});
}
{
"name": "Raceloop",
"version": "1.0.0",
"scripts": {
"start": "webpack-dashboard -- webpack-dev-server --inline --hot --progress --port 8080",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
"postinstall": "typings install",
"typings": "typings"
},
"dependencies": {
"@angular/common": "2.0.0-rc.6",
"@angular/compiler": "2.0.0-rc.6",
"@angular/core": "2.0.0-rc.6",
"@angular/forms": "2.0.0-rc.6",
"@angular/http": "2.0.0-rc.6",
"@angular/platform-browser": "2.0.0-rc.6",
"@angular/platform-browser-dynamic": "2.0.0-rc.6",
"@angular/router": "^3.0.0-rc.2",
"@angular2-material/button": "^2.0.0-alpha.8-1",
"@angular2-material/button-toggle": "^2.0.0-alpha.8-1",
"@angular2-material/card": "^2.0.0-alpha.8-1",
"@angular2-material/checkbox": "^2.0.0-alpha.8-1",
"@angular2-material/core": "^2.0.0-alpha.8-1",
"@angular2-material/grid-list": "^2.0.0-alpha.8-1",
"@angular2-material/icon": "^2.0.0-alpha.8-1",
"@angular2-material/input": "^2.0.0-alpha.8-1",
"@angular2-material/list": "^2.0.0-alpha.8-1",
"@angular2-material/menu": "^2.0.0-alpha.8-1",
"@angular2-material/progress-bar": "^2.0.0-alpha.8-1",
"@angular2-material/progress-circle": "^2.0.0-alpha.8-1",
"@angular2-material/radio": "^2.0.0-alpha.8-1",
"@angular2-material/sidenav": "^2.0.0-alpha.8-1",
"@angular2-material/slide-toggle": "^2.0.0-alpha.8-1",
"@angular2-material/slider": "^2.0.0-alpha.8-1",
"@angular2-material/tabs": "^2.0.0-alpha.8-1",
"@angular2-material/toolbar": "^2.0.0-alpha.8-1",
"@angular2-material/tooltip": "^2.0.0-alpha.8-1",
"@ngrx/core": "1.1.0",
"@ngrx/effects": "2.0.0-beta.3",
"@ngrx/store": "2.1.2",
"@types/hammerjs": "^2.0.32",
"angular2-apollo": "^0.4.5",
"apollo-client": "^0.4.14",
"core-js": "2.4.1",
"hammerjs": "2.0.8",
"immutable": "3.8.1",
"moment": "^2.15.0",
"reflect-metadata": "0.1.8",
"rxjs": "5.0.0-beta.11",
"typed-immutable-record": "0.0.5",
"zone.js": "0.6.17"
},
"devDependencies": {
"angular2-template-loader": "0.5.0",
"codelyzer": "0.0.28",
"css-loader": "0.25.0",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.22.0",
"json-loader": "0.5.4",
"node-sass": "^3.9.3",
"null-loader": "0.1.1",
"raw-loader": "0.5.1",
"rimraf": "2.5.4",
"sass-loader": "^4.0.2",
"style-loader": "0.13.1",
"ts-loader": "0.8.2",
"tslint": "^3.15.1",
"typescript": "2.1.0-dev.20160903",
"typings": "1.3.3",
"webpack": "2.1.0-beta.21",
"webpack-dashboard": "0.1.8",
"webpack-dev-server": "2.1.0-beta.3",
"webpack-merge": "0.14.1",
"worker-loader": "0.7.1"
}
}
使用webpack热中间件插件实际上非常简单 webpack.express.config.js
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
publicPath: 'http://localhost:8080/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'styles': './src/styles/main.scss',
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['', '.js', '.ts', 'scss']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['ts', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
}
,
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills', 'styles']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
var hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';
module.exports = {
context: __dirname,
// Include the hot middleware with each entry point
entry: {
// Add the client which connects to our middleware
'styles': ['../src/styles/main.scss', hotMiddlewareScript],
'polyfills': ['../src/app/polyfills.ts', hotMiddlewareScript],
'vendor': ['../src/app/vendor.ts', hotMiddlewareScript],
'manager': ['../src/app/main-manager.ts', hotMiddlewareScript],
'authenticator': ['../src/app/main-authenticator.ts', hotMiddlewareScript]
},
output: {
path: __dirname,
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
resolve: {
extensions: ['', '.js', '.ts', 'scss']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['ts', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['mainapp', 'vendor', 'polyfills', 'styles']
}),
//new HtmlWebpackPlugin({
// template: '../src/index.html'
//}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
};
/// <reference path="../typings/index.d.ts" />
let http = require('http');
let express = require('express');
let morgan = require('morgan');
let app = express();
app.use(morgan('short'));
app.set('view engine', 'pug');
// ************************************
// This is the real meat of the example
// ************************************
(function() {
let webpack = require('webpack');
let webpackDevMiddleWare = require('webpack-dev-middleware');
let webpackHotMiddleWare = require('webpack-hot-middleware');
// Step 1: Create & configure a webpack compiler
let webpackConfig = require(process.env.WEBPACK_CONFIG ? process.env.WEBPACK_CONFIG : '../webpack.config');
let compiler = webpack(webpackConfig);
// Step 2: Attach the dev middleware to the compiler & the server
app.use(webpackDevMiddleWare(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath
}));
// Step 3: Attach the hot middleware to the compiler & the server
app.use(webpackHotMiddleWare(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000
}));
})();
// Do anything you like with the rest of your express application.
app.get("/", function(req, res) {
res.sendFile(__dirname + '/app/index-manager.html');
});
app.get("/multientry", function(req, res) {
res.sendFile(__dirname + '/app/index-multientry.html');
});
if (require.main === module) {
let server = http.createServer(app);
server.listen(process.env.PORT || 4200, function() {
console.log("Listening on %j", server.address());
});
}
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
publicPath: 'http://localhost:8080/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'styles': './src/styles/main.scss',
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['', '.js', '.ts', 'scss']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['ts', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
}
,
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills', 'styles']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
var hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';
module.exports = {
context: __dirname,
// Include the hot middleware with each entry point
entry: {
// Add the client which connects to our middleware
'styles': ['../src/styles/main.scss', hotMiddlewareScript],
'polyfills': ['../src/app/polyfills.ts', hotMiddlewareScript],
'vendor': ['../src/app/vendor.ts', hotMiddlewareScript],
'manager': ['../src/app/main-manager.ts', hotMiddlewareScript],
'authenticator': ['../src/app/main-authenticator.ts', hotMiddlewareScript]
},
output: {
path: __dirname,
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
resolve: {
extensions: ['', '.js', '.ts', 'scss']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['ts', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['mainapp', 'vendor', 'polyfills', 'styles']
}),
//new HtmlWebpackPlugin({
// template: '../src/index.html'
//}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
};
/// <reference path="../typings/index.d.ts" />
let http = require('http');
let express = require('express');
let morgan = require('morgan');
let app = express();
app.use(morgan('short'));
app.set('view engine', 'pug');
// ************************************
// This is the real meat of the example
// ************************************
(function() {
let webpack = require('webpack');
let webpackDevMiddleWare = require('webpack-dev-middleware');
let webpackHotMiddleWare = require('webpack-hot-middleware');
// Step 1: Create & configure a webpack compiler
let webpackConfig = require(process.env.WEBPACK_CONFIG ? process.env.WEBPACK_CONFIG : '../webpack.config');
let compiler = webpack(webpackConfig);
// Step 2: Attach the dev middleware to the compiler & the server
app.use(webpackDevMiddleWare(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath
}));
// Step 3: Attach the hot middleware to the compiler & the server
app.use(webpackHotMiddleWare(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000
}));
})();
// Do anything you like with the rest of your express application.
app.get("/", function(req, res) {
res.sendFile(__dirname + '/app/index-manager.html');
});
app.get("/multientry", function(req, res) {
res.sendFile(__dirname + '/app/index-multientry.html');
});
if (require.main === module) {
let server = http.createServer(app);
server.listen(process.env.PORT || 4200, function() {
console.log("Listening on %j", server.address());
});
}
//
让http=require（'http'）；
let express=要求（'express'）；
设morgan=require（‘morgan’）；
设app=express（）；
应用程序使用（摩根（简称“短”）；
应用程序集（“查看引擎”、“帕格”）；
// ************************************
//这是这个例子的真正内容
// ************************************
（功能（）{
设webpack=require（'webpack'）；
让webpackDevMiddleWare=require（'webpack-dev-middleware'）；
让webpackHotMiddleWare=require（'webpack-hot-middleware'）；
//步骤1：创建和配置网页包编译器
让webpackConfig=require（process.env.WEBPACK_-CONFIG？process.env.WEBPACK_-CONFIG:'../WEBPACK.CONFIG'）；
让编译器=webpack（webpackConfig）；
//步骤2：将dev中间件连接到编译器和服务器
应用程序使用（webpackDevMiddleWare（编译器、{
没错，
publicPath:webpackConfig.output.publicPath
}));
//步骤3：将热中间件连接到编译器和服务器
应用程序使用（WebPackageHotMiddleware）（编译器{
日志：console.log，
路径：'/___网页_hmr'，
心跳：10*1000
}));
})();
//在express应用程序的其余部分中执行任何您喜欢的操作。
应用程序获取（“/”，函数（请求，恢复）{
res.sendFile（uu dirname+'/app/index manager.html'）；
});
应用程序获取（“/multi-entry”，函数（请求，恢复）{
res.sendFile（uu dirname+'/app/index multientry.html'）；
});
if（require.main==模块）{
让server=http.createServer（app）；
listen（process.env.PORT | | 4200，函数（）{
console.log（“侦听%j”，server.address（））；
});
}