Использование webpack HMR (горячая замена модуля) без webpack-dev-server

Я реализовал HMR с помощью webpack, и он работает нормально. Когда я что-то меняю в консоли, я вижу, что она обновлена, но поскольку я использую ее для пакета сервера, мне было интересно отправить сигнал в браузер для перезагрузки после завершения 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)
  })
}

person Igor-Vuk    schedule 07.06.2017    source источник


Ответы (1)


webpack-dev-server устанавливает сервер, который будет передавать изменения любому слушающему клиенту. Если вы пишете собственное серверное приложение, оно не будет клиентом сервера webpack. Вместо этого вы захотите добавить веб-пакет на сервер, чтобы ваш клиент мог подключаться к нему и получать обновления. Для этого вам понадобятся две вещи:

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

Первый позволяет webpack связывать ваш код и обслуживать его из вашего серверного приложения. Второй позволяет передавать клиенту обновления HMR.

Примечание: webpack-dev-server фактически использует внутри себя webpack-dev-middleware. По сути, это просто предварительно настроенная версия промежуточного программного обеспечения.

person Tim Dorr    schedule 07.06.2017
comment
Привет, Тим. Спасибо за ответ. Я сделал пробное приложение с webpack-dev-middleware и webpack-hot-middleware, и оно мне совсем не понравилось. Каждый раз, когда я что-то менял на сервере, мой клиентский пакет приходилось перестраивать, хотя я реализовал HMR и обновлял бэкэнд без перезапуска сервера. Все работало, но было слишком много заедов с тряской двумя связками. Это было нормально с некоторыми небольшими приложениями без особой внутренней логики. После того, как я разделил его на два пакета и 2 сервера, все стало работать лучше. Просто нужно понять, как теперь выполнять горячую замену без devServer. - person Igor-Vuk; 08.06.2017