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

94

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.

javascript node.js webpack webpack-dev-server webpack-dev-middleware Mendes
fonte
2
Nenhum dos pacotes listados aqui são usados ​​no lado do servidor na produção - eles são apenas ferramentas de desenvolvedor. Você usaria webpack-dev-middleware(e potencialmente webpack-hot-middleware) se quisesse escrever seu próprio servidor de desenvolvimento customizado. A menos que haja um recurso específico que você deseja que webpack-dev-servernão tenha, você deve apenas usá-lo.
Joe Clay

Respostas:

120

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.

Riscarrott
fonte
2
Para aqueles em busca de divisão de substituição de módulo ativo de front-end vs back-end, consulte este post: stackoverflow.com/questions/46086297/… Xlee faz um bom trabalho explicando os requisitos para cada lado - lado do servidor precisando de uma reinicialização , front-end que permite o carregamento de pacotes javascript atualizados.
abelito
9

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?

Mendes
fonte
2
Ele também diz Use webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers.Então você pode querer tentar webpack-serve .
Bruce Dom
3
A nota de manutenção foi removida. Então eu acho que é recomendado novamente ??? Enlouquecedor que uma ferramenta de desenvolvimento tão importante tenha uma equipe de mantenedores tão terrível ao redor dela.
Capitão Fogetti
5
webpack-serve está obsoleto e como @CaptainFogetti disse que a nota de manutenção foi removida do webpack-dev-server a partir de hoje
Anoop D