├── README.md
├── package.json
├── src
├── client.js
├── pages
│ ├── about.js
│ └── home.js
└── static.js
└── webpack.config.js
/README.md:
--------------------------------------------------------------------------------
1 | # Webpack Static Site Generator Plugin Example
2 |
3 | This is a companion repository to a [blog post](https://dev.to/kayis/create-static-sites-with-webpack)
4 |
5 | ## Start
6 |
7 | - npm run setup
8 | - open URL mentioned by the setup script in the browser
9 | - look in the browser dev-tools and see the 'Hello, World!' getting logged on both pages
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-static-plugin",
3 | "version": "0.1.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "setup": "npm i && npm run build && npm start",
8 | "build": "webpack",
9 | "start": "http-server -c-1 ./build"
10 | },
11 | "author": "Kay Plößer",
12 | "license": "GPL-3.0",
13 | "devDependencies": {
14 | "http-server": "^0.9.0",
15 | "static-site-generator-webpack-plugin": "^3.1.0",
16 | "webpack": "^2.2.1"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
1 | console.info('Hello, World!')
--------------------------------------------------------------------------------
/src/pages/about.js:
--------------------------------------------------------------------------------
1 | module.exports = () => `About
`
--------------------------------------------------------------------------------
/src/pages/home.js:
--------------------------------------------------------------------------------
1 | module.exports = () => `Home
`
--------------------------------------------------------------------------------
/src/static.js:
--------------------------------------------------------------------------------
1 | const Nav = (routes, path) =>
2 | routes
3 | .map(({title, url}) => `${title}`)
4 | .join(' | ')
5 |
6 | const Page = path => require(`./pages${path == '/'? '/home' : path}`)()
7 |
8 | module.exports = data => Promise.resolve(`
9 |
10 |
11 | Webpack Static Plugin Example
12 |
13 | ${Nav(data.routes, data.path)}
14 | ${Page(data.path)}
15 |
16 |
17 |
18 | `)
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin')
2 |
3 | const data = {
4 | routes: [
5 | {url: '/', title: 'Home'},
6 | {url: '/about', title: 'About'},
7 | ]
8 | }
9 |
10 | const staticChunk = 'static'
11 |
12 | const static = new StaticSiteGeneratorPlugin(staticChunk, data.routes.map(r => r.url), data)
13 |
14 | module.exports = {
15 |
16 | entry: {
17 | main: './src/client.js',
18 | [staticChunk]: './src/static.js',
19 | },
20 |
21 | output: {
22 | filename: '[name].js',
23 | path: 'build',
24 | libraryTarget: 'umd',
25 | },
26 |
27 | plugins: [static],
28 |
29 | }
--------------------------------------------------------------------------------