Configurando webpack pra stack com Nodejs

[eduardojmatos]

TL;DR

Estamos na dúvida de fazer o compile de assets, servir estáticos (html) nas rotas do express e usar webpack. Tudo ao mesmo tempo.

Server Rendering

Vamos usar Nodejs pra servir templates de HTML (EJS) com links pra arquivos buildados com webpack (CSS, JS, imagens). O problema é fazer isso tudo somente com webpack e servir os templates.

Alguém conhece algum exemplo bacana de uso do webpack no backend, em ambiente de DEV? Em prod vamos compilar tudo mesmo, não é o problema.

*OBS: a motivação de usar webpack na real é o HMR dele. Mas se tiverem outra sugestão pra resolver o problema, pode comentar! :)

[adrianojdesouza]

E ai Edu blz?

Não sabia exatamente se era o que você queria então eu fiz uma poc para você dar uma olhada.
Nesse caso para ser mais rápido fiz com hot reload e não com HMR, dessa forma quando o usuário alterar um arquivo a página vai fazer um reload. Se for perto do que você estava buscando acho que da pra ter um norte, se não for me fala hehe.
https://github.com/adrianojdesouza/poc-webpack-server

[eduardojmatos]

@adrianojdesouza Hummm interessante!! É mais ou menos esse caminho sim. Vou passar pro time pra gente dar uma estudada aqui e já te retorno!

[eluizbr]

@eduardojmatos eu já fiz algo semelhante com NodeJS + ReactJS + Webpack.
O nextJS talvez possa te ajudar em algo nesse sentido. Ele já é pronto para usar com o trio citado acima...

[eduardojmatos]

@adrianojdesouza rodamos aqui sua POC, mas não conseguimos fazer funfar hehehe. Se bate em http://localhost:8000 ele lista os arquivos do diretório

[eduardojmatos]

@eluizbr pode crer. O problema é que ele precisa ser necessariamente escrito dentro de um JavaScript. Queremos não ter esse acoplamento com componente por hora. Só renderizar um template mesmo :/

[ronal2do]

O webpack é um module bundle, no caso ele serviria para preparar seus assets.

[eduardojmatos]

@ronal2do sim sim, tô ligado. Nossa dúvida é na integração entre os dois mundos. Node no back-end servindo template estático e servindo asset (css, js, imagens) via webpack, levando em conta os dois mundos (environment de prod)

[ronal2do]

aqui temos um exemplo legal,
https://github.com/sahat/megaboilerplate/blob/master/examples/express-nunjucks-postcss-unstyled-react-webpack-mocha-sqlite-twitter/server.js#L90

também podemos integrar com o SSR ao invés do bundle vamos servindo os assets sob demanda, no caso do react conseguimos fazer o code-splitting que esses assets são gerados a medida que carregados
https://medium.com/faceyspacey/code-cracked-for-code-splitting-ssr-in-reactlandia-react-loadable-webpack-flush-chunks-and-1a6b0112a8b8

[adrianojdesouza]

@eduardojmatos da uma olhada em:
https://github.com/adrianojdesouza/poc-webpack-server/blob/master/views/index.jade
Para acessar um assets no caso app.js fica assim: http://localhost:8000/assets/app.js
Acessa a url: http://localhost:3000 e depois altera o arquivo app/entry.js.
Vê se rola

[ronal2do]

Com o node + express ou koa vc chama a primeira rota e ele renderiza via webpack o seu bundle

[eduardojmatos]

@ronal2do putz, webpack 1 né? :/

Lembrando também, nossos templates são em EJS. Não vamos usar React por hora.

[eduardojmatos]

@ronal2do é exatamente isso que a gente quer. Somente em DEV mode. Vou dar uma vasculhada melhor no webpack-dev-server pra ver

[eduardojmatos]

@adrianojdesouza boa boa, vou rodar novamente aqui!

[ronal2do]

então @eduardojmatos webpack 2 também, webpack-dev-server tem o hot-reload

[eduardojmatos]

webpack 3? <3 hehehhe

[ronal2do]

https://webpack.js.org/configuration/dev-server/#devserver-setup
Nas docs está do 3

[eduardojmatos]

@ronal2do boa, estamos estudando exatamente isso agora =D