我已经在我的快速节点服务器上运行了webpack 2 dev中间件，并且出于某种原因，从单个更改中对wepback构建器的过度调用（构建器应该每次更改运行一次） ，这在类似配置的webpack 1中没有发生;我没有找到确切的原因。
这是server.js：
var babel = require('babel-polyfill'),
express = require('express'),
path = require('path'),
app = express(),
router = express.Router(),
port = process.env.PORT ? process.env.PORT : 3000,
dist = path.join(__dirname, ('dist' + (process.env.NODE_ENV ? '/' + process.env.NODE_ENV : 'staging'))),
superagent = require('superagent'),
config = require('./config'),
serverInstance = null,
chalk = require('chalk')
process.on('uncaughtException', function (err) {
throw err;
})
process.on('SIGINT', function () {
serverInstance.close();
process.exit(0);
})
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
/**
* Healthcheck
*/
app.use('/healthcheck', function (req, res) {
res.json({
'env': {
'NODE_ENV': process.env.NODE_ENV
}
});
res.end();
});
router.use('/api/test', function (req, res) {
superagent
.get('https://jsonip.com/')
.end(function (err, response) {
res.send(response.body);
});
});
// router order matters
// HMR only in development
if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'staging') {
console.log('Development environment: Starting webPack middleware...');
var webpack = require('webpack'),
webpackDevMiddleware = require('webpack-dev-middleware'),
webpackHotMiddleware = require('webpack-hot-middleware'),
webpackDevConfig = require('./webpack.dev.config'),
compiler = webpack(webpackDevConfig),
_ = require('lodash');
var devMiddleware = webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: webpackDevConfig.output.publicPath,
stats: {
colors: true,
hash: false,
version: true,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: true,
errorDetails: true,
warnings: true,
publicPath: false
}
});
router.use(devMiddleware);
router.use(webpackHotMiddleware(compiler, {
log: console.log
}));
router.use(function (req, res, next) {
const reqPath = req.url
// find the file that the browser is looking for
const file = _.last(reqPath.split('/'))
if ([webpackDevConfig.output.filename, 'index.html'].indexOf(file) !== -1) {
res.end(devMiddleware.fileSystem.readFileSync(path.join(webpackDevConfig.output.path, file)));
} else if (file.indexOf('.') === -1) {
// if the url does not have an extension, assume they've navigated to something like /home and want index.html
res.end(devMiddleware.fileSystem.readFileSync(path.join(webpackDevConfig.output.path, 'index.html')));
} else {
next();
}
});
} else {
//Production needs physical files! (built via separate process)
router.use('/assets', express.static(dist));
// any other is mapped here
router.get('*', function(req, res, next) {
// Catch-all route after the ones you want to exclude like the example before '/'
// or exclude it here (this has the advantage of ordering however you'd like)
if (req.url === '/foo' || req.url === '/bar') {
return next()
};
res.sendFile(path.join(dist, 'index.html'));
});
}
app.disable('x-powered-by');
app.use('/', router);
serverInstance = app.listen(port, function (error) {
if (error) {
console.log(error); // eslint-disable-line no-console
}
console.log(chalk.green('[' + config.build_name + '] listening on port ' + port + '!'));
});
webpack.dev.config文件：
var path = require("path");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'inline-source-map',
context: path.resolve(__dirname, 'src'),
entry: [
'react-hot-loader/patch',
'webpack/hot/dev-server',
'webpack-hot-middleware/client',
'./js/index.js'
],
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
publicPath: '/assets'
},
devServer: {
historyApiFallback: true,
// enable HMR on the server
hot: true,
// match the output path
contentBase: path.resolve(__dirname, 'dist'),
// match the output `publicPath`
publicPath: '/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: [
'file-loader'
]
},
{
test: /\.(jpg|png|gif|svg)$/i,
use: [
'file-loader?name=[path][name].[ext]?[hash]&outputPath=/assets/&publicPath=/assets/'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: __dirname + '/src/' + 'index.html',
filename: 'index.html'
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
}),
// enable HMR globally
new webpack.HotModuleReplacementPlugin(),
// prints more readable module names in the browser console on HMR updates
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
};
控制台中的输出：
webpack building...
webpack built 1052237f44d454edc2fd in 714ms
webpack building...
webpack built 1052237f44d454edc2fd in 112ms
webpack building...
webpack built 1052237f44d454edc2fd in 107ms
webpack building...
webpack built 1052237f44d454edc2fd in 104ms
webpack building...
webpack built 1052237f44d454edc2fd in 102ms
webpack building...
webpack built 1052237f44d454edc2fd in 112ms
webpack building...
webpack built 1052237f44d454edc2fd in 99ms
webpack building...
webpack built 1052237f44d454edc2fd in 98ms
webpack building...
webpack built 1052237f44d454edc2fd in 106ms
webpack building...
webpack built 1052237f44d454edc2fd in 106ms
webpack building...
webpack built 1052237f44d454edc2fd in 98ms
webpack building...
webpack built 1052237f44d454edc2fd in 103ms
webpack building...
webpack built 1052237f44d454edc2fd in 105ms
webpack building...
webpack built 1052237f44d454edc2fd in 98ms
webpack building...
webpack built 1052237f44d454edc2fd in 97ms
webpack building...
webpack built 1052237f44d454edc2fd in 102ms
webpack building...
webpack built 1052237f44d454edc2fd in 104ms
webpack building...
webpack built 1052237f44d454edc2fd in 98ms
webpack building...
webpack built 1052237f44d454edc2fd in 97ms
webpack building...
webpack built 1052237f44d454edc2fd in 97ms
webpack building...
webpack built 1052237f44d454edc2fd in 99ms
webpack building...
webpack built 1052237f44d454edc2fd in 91ms
服务器由命令node server.js启动，webpack等版本为：
"webpack": "^2.2.0",
"webpack-dev-middleware": "^1.9.0",
"webpack-dev-server": "^1.9.0",
"webpack-hot-middleware": "^2.15.0",
将webpack-dev-server升级到2.3.0后问题仍然存在。