https://github.com/zavalit/statichtmlwebpackplugin
Webpack plugin to generate static html pages
https://github.com/zavalit/statichtmlwebpackplugin
Last synced: 9 months ago
JSON representation
Webpack plugin to generate static html pages
- Host: GitHub
- URL: https://github.com/zavalit/statichtmlwebpackplugin
- Owner: zavalit
- Created: 2015-08-16T13:18:00.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-10-07T13:31:09.000Z (over 9 years ago)
- Last Synced: 2025-04-24T18:02:46.039Z (10 months ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](http://travis-ci.org/zavalit/StaticHtmlWebpackPlugin)
# Static Html Webpack plugin
It's a webpack plugin that aims to make static html generation as simple and transparent as possible.
You may want to get use of it if your are care of:
- SEO
- Better performance
- Decoupling Frontend from Backend by design
#### Configuration
It's nothing more as just provide a plugin instance and ensure that your output's *libraryTarget*
is equal to **umd** API. It should be enough to enable plugin to do his work.
```
// webpack.config.js
var StaticHtml = require("static-html-webpack-plugin");
module.exports = {
entry: {
server: __dirname + '/index.js'
},
output: {
path: __dirname + '/public',
filename: '[name].js',
libraryTarget: 'umd'
},
plugins: [new StaticHtml()]
}
```
Plugin takes following options:
```
- htmlFilename: name of html file, that have to be generated (default is "index.html"),
- prependDoctypeHtml: set "" before your html (default is true),
- appendHash: append hash to css and script files (default is true)
```
To manipulate Plugin Options just provide it to Plugin instance like that:
```
plugins: [new StaticHtml({appendHash: false})]
```
You may have noticed, that **entry** applies an object with a key/value pair ```server: __dirname + '/index.js'``` that is where all static generation relevant staff have to be handled. You are free to extend it with ```... client: __dirname + '/yourclient.js'``` in order to have a library that relies on client's objects like *window.document* that you don't have, when you generate your static html. **StaticHtmlWebpackPlugin** just doesn't care about anything that, is not relevant for server-side html generation, all it looks for is a **entry.server** key.
To provide your actual html you have to point to it:
```
// index.js
module.exports = "
Static Html
Hi, i'm so static
"
```
#### Html based on React routes.
You can also generate a multiple pages at once by providing routes of react-router, for that case you have to provide an object in stead of plain html. The object have to look like this:
```
// index.js
import React from 'react';
import {renderToStaticMarkup} from 'react-dom/server';
import {RoutingContext, match} from 'react-router';
import routes from './routes.js';
module.exports = {
'react-router' : {
getPaths: function(parser){
return parser(routes)
},
buildHtml: function(path, callback){
match({ routes, location: path }, (error, redirectLocation, renderProps) => {
callback(renderToStaticMarkup())
})
}
}
}
```
and for a sample routes like this:
```
// routes.js
import React from 'react'
import { Route, Link } from 'react-router'
const App = React.createClass({
render() {
return (
App
- About
{this.props.children}
)
}
})
const About = React.createClass({
render() {
return
About
}
})
module.exports = (
)
```
It'a also possible to define Routes as an Array, if you don't want to use JSX.
```
module.exports = [
{ path: '/',
component: App,
childRoutes: [
{ path: 'about', component: About }
]
}
]
```
you will get 2 html files generated:
```
public/index.html
public/about/index.html
```
#### Extend it.
You can use also write your own generators, just create another addon in ```node_modules/static-html-webapck-plugin/addons``` that has the following sceleton:
```
//youraddon.js
module.exports = {
getPaths: function(routes){
let paths = [...];
...
return paths;
}
}
```
and reference to it in your entry file:
```
//index.js
module.exports = {
'youraddon' : {
getPaths: function(parser){
return parser(routes)
},
buildHtml: function(path, callback){
// your logic to generate an html for a given path and provide it as an argument to a callback function
}
}
}
```