在没有 webpack-dev-server 的情况下使用 webpack HMR(热模块替换)

Posted

技术标签:

【中文标题】在没有 webpack-dev-server 的情况下使用 webpack HMR(热模块替换)【英文标题】:Using webpack HMR (Hot Module replacement) without the webpack-dev-server 【发布时间】:2017-11-08 20:46:22 【问题描述】:

我用 webpack 实现了 HMR,它工作正常。当我更改某些内容时,我在控制台中看到它已更新,但由于我将它用于服务器捆绑包,我想知道在 HMR 完成后热向浏览器发送信号以重新加载,或者更好的是,如何在不刷新的情况下进行热交换浏览器?

它在我使用 webpack-dev-server 的客户端正常工作,但在我使用 webpack/hot/poll 的服务器端我需要在每次更改后手动刷新才能在浏览器中看到它?

webpack.config.server.js

module.exports = 
  ...
  watch: true,
  target: 'node',
  node: 
    __dirname: true,
    __filename: true
  ,
  entry: 
    bundle: [
      'webpack/hot/poll?1000',
      './src/server/devServer'
    ]
  ,
  output: 
    path: path.join(__dirname, 'src', 'build'),
    filename: '[name].js'
  ,
  resolve: 
    extensions: ['.js', '.jsx'],
    alias: 
      CountdownForm: path.resolve(__dirname, 'src/client/scenes/countdown/components/CountdownForm.jsx'),
     ...
    
  ,
  externals: [nodeExternals(
    whitelist: ['webpack/hot/poll?1000']
  )],
 ...
  plugins: [
    new StartServerPlugin('bundle.js'),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new htmlWebpackPlugin(
      title: 'React Timer',
      template: 'ejs-loader!./src/server/views/index.ejs'
    ),
    new webpack.DefinePlugin(
      'process.env': 
        NODE_ENV: JSON.stringify('development')
      
    )
  ]

开发服务器

const server = http.createServer(app)
let currentApp = app

server.listen(PORT, () => 
  console.log(`
  Express server is up on port $PORT
  Development environment - Webpack HMR active
  `)
)

if (module.hot) 
  module.hot.accept('./index', () => 
    server.removeListener('request', currentApp)
    currentApp = app
    server.on('request', app)
  )

【问题讨论】:

【参考方案1】:

webpack-dev-server 设置一个服务器,将更改传输到任何监听客户端。如果您正在编写自己的服务器应用程序,它不会是 webpack 服务器的客户端。相反,您需要将 webpack 添加到服务器,以便您的客户端可以连接到它并获取更新。为此,您需要做两件事:

https://github.com/webpack/webpack-dev-middlewarehttps://github.com/glenjamin/webpack-hot-middleware

第一个允许 webpack 捆绑您的代码并从您的服务器应用程序提供它。第二个允许它向客户端传输 HMR 更新。

注意:webpack-dev-server 实际上在内部使用 webpack-dev-middleware。它基本上只是中间件的预配置版本。

【讨论】:

嗨蒂姆。感谢您的回答。我用 webpack-dev-middleware 和 webpack-hot-middleware 做了一个试用应用程序,但我一点也不喜欢它。每次我在服务器上更改某些内容时,我的客户端捆绑包都需要重新构建,即使我实现了 HMR 并且它正在更新后端而无需重新启动服务器。一切正常,但慢跑两个捆绑包时出现了太多的小问题。一些没有太多后端逻辑的小型应用程序很好。在我将它分成两个捆绑包和 2 个服务器之后,一切都运行得更好了。现在只需要弄清楚如何在没有 devServer 的情况下进行热插拔。

以上是关于在没有 webpack-dev-server 的情况下使用 webpack HMR(热模块替换)的主要内容,如果未能解决你的问题,请参考以下文章

关于webpack-dev-server不能及时更新的问题

React Hot Reloading + Webpack 没有 Express 或 Webpack-Dev-Server

webpack-dev-server 报 [ Invalid Host/Origin header ] 错误

Codesandbox 为 React 应用程序提供“目标容器不是 DOM 元素”错误,但 webpack-dev-server 没有

我想实现安卓手机拍照后,照片自动同步到局域网没电脑。没有外网的情

webpack-dev-server工具