没有webpack dev服务器的webpack热模块更换？

Question

我有一个现有的快递服务器,用于提供静态资产/ api数据调用.通常如何将webpack集成到这种设置中？是否必须运行webpack dev服务器才能更换热模块？有没有办法让webpack捆绑所有模块,然后通过从现有服务器请求静态资产来替换热模块？

提前致谢.

Answer 1

这是我做HMR的最小快速设置

server.js

 
var express = require('express')
var app = express()

var morgan = require('morgan')

var env = app.get('env')

if (env == 'development') {
  var webpack = require('webpack')
  var webpackDevMiddleware = require('webpack-dev-middleware')
  var webpackHotMiddleware = require('webpack-hot-middleware')

  var config = require('./webpack.config')
  var compiler = webpack(config)

  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
  app.use(webpackHotMiddleware(compiler))
  app.use(morgan('dev'))

  app.get("/", function(req, res) {
    res.sendFile(__dirname + '/index.html')
  })
}

app.listen(8080, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.info("==>   Listening on port %s. Open up http://localhost:%s/ in your browser.", 8080, 8080)
  }
})

和webpack.config.js(我删除了一些混乱,让它非常小)

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-hot-middleware/client',
    './index',
  ],
  output: { 
    path: __dirname, 
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: {presets: ['es2015', 'react']} },
    ]
  },
};

我认为这应该为您提供足够的信息,以便将webpack合并到您的快速服务器中.