不使用webpack Dev Server实现Webpack热模块替换？

Question

我有一个现有的express服务器，用于提供静态资源/ api数据调用。在这种设置中，通常如何集成webpack？是否必须运行webpack dev服务器以进行热模块替换？是否有任何方法让webpack捆绑所有模块，然后通过从已经存在的服务器请求静态资产来进行热模块替换？谢谢。

- pQuestions123

Answer 1

这是一个最小化的 Express 设置，可以实现 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("==>   正在监听端口 %s。打开浏览器访问 http://localhost:%s/ 查看应用。", 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 集成到 express 服务器中了。

- Mad Wombat

---

现在看起来你不需要跳过所有的障碍才能让这些东西工作了。https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html - Mad Wombat