react-entry-loader
Use webpack entry modules as templates for generating HTML assets.
Installation
npm install --save-dev react-entry-loader
Usage
You need to include a single ReactEntryLoaderPlugin in your webpack config to handle the HTML asset generation.
The loader itself can be used like any other loader in webpack. There is a little helper function for defining entry modules, which makes it a bit more readable than using plain strings with query params. All options that is are not a loader option are interpreted as template props. They will be forwarded to the template during compile time.
;; entry: page1: './src/page1.js' page2: 'react-entry-loader?output=page2.html!./src/page2.js' plugins: ;
The loader expects a JS module that has a React component as the default export. This component is a mix of template and entry module code.
; ;; ;; const Html = <html> <head> <title>title</title> <Styles files=styles /> <Scripts files=scripts async /> </head> <body> <div id="page1-app" className=themeroot> <Module onLoad=> <App theme=theme /> </Module> </div> </body> </html>; ;
The child components of <Module onLoad={...}>
and any code that they depend on
is treated as the webpack entry module code, as is the code being called in onLoad={some-render-or-init-function}
.
The entry module code will be extracted along with the some-render-or-init-function
.
The latter should be a function with the interface render(...children)
that
renders the children
into the DOM at run-time.
You can use react-entry-loader/render's render(elementId)
or hydrate(elementId)
render function factories for this or write your own.
Extracted Entry Module:
;;;;<App theme=theme />;
The template code is everything left over after the child components and some-render-or-init-function
code has been removed.
Extracted Template:
;;; const Html = <html> <head> <title>title</title> <Styles files=styles /> <Scripts files=scripts async /> </head> <body> <div id="page1-app" className=themeroot> <Module /> </div> </body> </html>;;
Note when using <Module hydratable ... />
the child components and their
dependencies will be left in place for compile time rendering.
The loader will return the entry module code to webpack and will send the extracted template code to the ReactEntryLoaderPlugin.
The plugin will render every entry module's template at the end of the webpack compilation process to generate HTML assets.
The final chunks that an entry module depends on will be passed as
scripts
and styles
props to the template components.
These can then be passed to the <Scripts>
and <Styles>
components that come
with the injectors module to reference the files in generated HTML.
Running the Examples
npm cinpx run
This starts a webserver and you can see the running app at http://localhost:8080/page1.html