Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc

Estou começando a trabalhar com webpackum node/expressambiente de desenvolvimento de um ReactJSaplicativo renderizado do lado do servidor react-router. Estou ficando muito confuso sobre a função de cada pacote webpack para ambientes dev e prod (runtime).

Aqui está o resumo do meu entendimento:

webpack: É um pacote, uma ferramenta para reunir diferentes partes de uma aplicação web e empacotá-la em um único arquivo .js (normalmente bundle.js). O arquivo de resultado é servido em um ambiente de produção para ser carregado pelo aplicativo e contém todos os componentes necessários para executar o código. Os recursos incluem redução de código, redução, etc.

webpack-dev-server: É um pacote que oferece um servidor para processar os arquivos do site. Ele também cria um único arquivo .js ( bundle.js) a partir de componentes do cliente, mas o serve na memória. Ele também tem a opção ( -hot) para monitorar todos os arquivos de construção e construir um novo pacote na memória no caso de alterações de código. O servidor é servido diretamente no navegador (ex:) http:/localhost:8080/webpack-dev-server/whatever. A combinação de carregamento na memória, processamento a quente e serviço do navegador permite ao usuário atualizar o aplicativo no navegador quando o código muda, ideal para ambiente de desenvolvimento.

Se eu tiver dúvidas sobre o texto acima, realmente não tenho certeza sobre o conteúdo abaixo, então por favor me avise se necessário

Um problema comum quando se utiliza webpack-dev-servercom node/expressé que webpack-dev-serveré um servidor, como é node/express. Isso torna este ambiente complicado para executar o cliente e algum código de nó / expresso (uma API etc.). NOTA: Isso é o que eu enfrentei, mas seria ótimo entender por que isso acontece com mais detalhes ...

webpack-dev-middleware: Este é um middleware com as mesmas funções de webpack-dev-server(empacotamento de memória, recarregamento a quente), mas em um formato que pode ser injetado no server/expressaplicativo. Dessa forma, você tem uma espécie de servidor (o webpack-dev-server) interno do servidor do nó. Opa: isso é um sonho maluco ??? Como esta peça pode resolver a equação de desenvolvimento e produção e tornar a vida mais simples

webpack-hot-middleware: Este ... Preso aqui ... encontrei esta peça ao procurar webpack-dev-middleware... Não tenho ideia de como usá-la.

NOTA FINAL: Desculpe, há algum pensamento errado. Eu realmente preciso de ajuda para entender essas variantes em um ambiente complexo. Se for conveniente, adicione mais pacotes / dados que irão construir todo o cenário.

webpack

Como você descreveu, o Webpack é um empacotador de módulo, ele empacota vários formatos de módulo principalmente para que possam ser executados em um navegador. Ele oferece CLI e Node API .

webpack-dev-middleware

Webpack Dev Middleware é um middleware que pode ser montado em um servidor expresso para servir à compilação mais recente do seu pacote durante o desenvolvimento. Isso usa webpacka API do Node no modo de observação e, em vez de enviar para o sistema de arquivos, a saída para a memória .

Para comparação, você pode usar algo semelhante em express.staticvez deste middleware na produção.

webpack-dev-server

O Webpack Dev Server é em si um servidor expresso que usa webpack-dev-middlewarepara servir o pacote mais recente e, adicionalmente, lida com solicitações de substituição de módulo a quente (HMR) para atualizações de módulo ao vivo no cliente.

webpack-hot-middleware

Webpack Hot Middleware é uma alternativa, webpack-dev-servermas em vez de iniciar um servidor, ele permite que você o monte em um servidor expresso existente / personalizado ao lado webpack-dev-middleware.

Além disso...

webpack-hot-server-middleware

Só para confundir ainda mais as coisas, existe também o Webpack Hot Server Middleware, que é projetado para ser usado junto webpack-dev-middlewaree webpack-hot-middlewarepara lidar com a substituição de módulos quentes de aplicativos renderizados por servidor.

A partir da atualização em 2018 e considerando a nota webpack-dev-server em sua página oficial do GitHub:

Projeto em manutenção Observe que o webpack-dev-server está atualmente em modo de manutenção e não aceitará nenhum recurso adicional no curto prazo. A maioria das novas solicitações de recursos pode ser realizada com o middleware Express; procure usar os ganchos antes e depois na documentação.

Qual seria a escolha natural para construir um HMR webpack?