markdalgleish / static-site-generator-webpack-plugin

Minimal, unopinionated static site generator powered by webpack
MIT License
1.61k stars 97 forks source link

Possible to have multiple templates? #133

Closed misner closed 6 years ago

misner commented 6 years ago

Hello,,

Newbie to Webpack (one week ago:-) , I started implemented your great plugin. I have browsed through all the examples on https://github.com/markdalgleish/static-site-generator-webpack-plugin/tree/master/test/success-cases, but could not find if it's possible to set some pathes with a certain template and others pathes with another template ?

I am trying this but I have doubts on the performance impact of calling twice (or more) the plugin like so

const path = require('path');
const StaticSiteGeneratorPlugin = require("static-site-generator-webpack-plugin");
const StatsWriterPlugin = require("webpack-stats-plugin").StatsWriterPlugin;
const ejs = require('ejs');
const fs = require('fs');
const Promise = require('bluebird');

var template = ejs.compile(fs.readFileSync(__dirname + '/template.ejs', 'utf-8'))
var paths = [
  '/',
  '/example1',
  '/example2'
];
var template2 = ejs.compile(fs.readFileSync(__dirname + '/template2.ejs', 'utf-8'))
var paths2 = [
  '/',
  '/example3',
 ''/example4',
];

module.exports = {
  entry: {
    index: "./index.js",
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),   
    libraryTarget: 'umd',
    globalObject: "this" //fixed 07/2018 issue related to umd - see github.com/markdalgleish/static-site-generator-webpack-plugin/issues/130
  },  
  },
   plugins: [    
    new StaticSiteGeneratorPlugin({
      paths: paths,
      locals: {
        template: template
      }
    }),
    new StaticSiteGeneratorPlugin({
      paths: paths2,
      locals: {
        template: template2
      }
    }),
    new StatsWriterPlugin() // Causes the asset's `size` method to be called
  ]
};

then render both on index.js :

module.exports = function(locals) {
  return Promise.resolve(locals.template({ html: '<h1> this is the render for template1' + locals.path + '</h1>' }));
 return Promise.resolve(locals.template({ xoxo: '<div> this is the render for template2' + locals.path + '</div>' }));
};

Template1.ejs

<html>
  <body>
    <%- html %>
  </body>
</html>

Template2.ejs with different locals

<html>
  <body>
    this is nice <%- xoxo %>
  </body>
</html>

Is it how it should be implemented for best practice and performance-wise ? or maybe something for cleaner is possible with multi-render which would be better for performance as we'll have to render 1000s of pages at scale. Indeed I fear index.js's linereturn Promise.resolve(locals.template2 will for example be called for paths1 routes also, but they have template1 so they don't need template2 locals: maybe it could slow down the build...

Tx M.