3

Here is my scenario:

  • I want to use ES6/7 in both client(React) and server(Express), plus PostCSS for CSS, so I need webpack + babel.

  • Several routes render page hosting React Components, some(React Components) trivial, some heavy.

  • I want to use pug as view engine, put the entire app in one SPA is not an option.

I have the setup working in dev mode (in my pug templates I include bundled assets directly in build dir with script tags, the problem is in production mode, the path to the bundled js file(s) contains hash and is dynamic.

The common practice for this problem seems to be using HtmlWebpackPlugin, which can inject dynamic bundled js path into your template. The problem is, I have many view templates in pug, I can't put an entry for each one of them in webpack.config.js. The option I am exploring is to have webpack generate a 'partial' that only contains assets include tags like and , then I include this 'partial' in my view templates. But HtmlWebpackPlugin does not work with pug. After some digging, I found another webpack plugin people use - pug-loader. but seems like it will just transform pug to plain HTML. which means I cannot include it as a pug file in all my view templates.

This has to be a solved problem but I just can't seem to find the solution.

Thank you in advance!

Graham
  • 7,431
  • 18
  • 59
  • 84
Xiaotian Guo
  • 1,635
  • 3
  • 17
  • 21
  • you may want [html-webpack-pug-plugin](https://www.npmjs.com/package/html-webpack-pug-plugin) – MarkoCen Oct 09 '17 at 15:10
  • Thank you @MarkoCen, the plugin has significantly less downloads/stars/forks than [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin), which makes me think if the approach I am taking is incorrect? I'd assume an express + pug web app with React/JSX Babel support should be very common. Am I missing something? Thanks again! – Xiaotian Guo Oct 09 '17 at 22:10
  • I don't think Pug or any other server side template systems are widely used with React since React is a client side render engine, all views are rendered by React rather than generated from server side template engine. – MarkoCen Oct 09 '17 at 23:20

0 Answers0