Webpack EJS widgets

01-how-to-use.md

• Clone the gist.
• Run: npm install ejs-compiled-loader
• Run: webpack --config 02-webpack.config.js
• Watch the magic happen.

This should split into two output JS files. One has the code fromt he entry, the other has the widget. Its loaded async.

02-webpack.config.js

module.exports = {
  entry: "./ß3-basic.js",
  output: {
    path: "./out",
    filename: "build.js",
    chunkfilename: "chunk.[id].js"
  },
  module: {
    loaders: [
      { test: /\.ejs$/, loader: "ejs-compiled" }
    ]
  }
}

03-basic.js

// ES6. Commented out since we dont use ES6 in this example
// import Widget from "./04-widget.ejs";

// CommonJS. Commented out to demonstrate code splitting.
// var Widget = require("./04-widget.ejs");

// Code splitting
require.ensure([
  "./04-widget.ejs"
], function(require){
  var Widget = require("./04-widget.ejs");
  document.body.write(Widget({
    heading: "Hello",
    text: "world"
  }))
})

04-widget.ejs

<h1><%= heading %></h1>
<p><%= text %></p>