不使用webpack-dev-server实现webpack HMR（热模块替换）

Question

不使用webpack-dev-server实现webpack HMR（热模块替换）

3

我使用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')
      }
    })
  ]
}

devServer

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)
  })
}

- Igor-Vuk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim Dorr · Accepted Answer

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

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

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

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