Use html-webpack-plugin for html rendering

This plugin will likely be updated when webpack is updated.

mustache-renderer-webpack-plugin/index.js

@@ -1,50 +0,0 @@
-var defaults = require('lodash.defaults');
-var fs = require('fs');
-var mustache = require('mustache');
-
-var render = function (template, route, config) {
-    config = config || {};
-    // Route definition
-    defaults(route, config);
-
-    // Render template
-    return mustache.render(template, route);
-};
-
-function MustacheRendererPlugin (options) {
-    if (!options.templatePath) throw new Error('MustacheRendererPlugin requires a templatePath option');
-    // Read template
-    var template = fs.readFileSync(options.templatePath, 'utf8');
-    this.template = template;
-    this.routes = options.routes || {};
-    this.config = options.config || {};
-    return this;
-}
-
-MustacheRendererPlugin.prototype.apply = function (compiler) {
-    var template = this.template;
-    var config = this.config;
-    var routes = this.routes;
-
-    compiler.plugin('emit', function (compilation, callback) {
-        var outputRoutes = {};
-        routes.forEach(function (route) {
-            var filename = route.name + '.html';
-            var content = render(template, route, config);
-            outputRoutes[route.pattern] = filename;
-            compilation.assets[filename] = {
-                source: function () {return content;},
-                size: function () {return content.length;}
-            };
-        });
-        var routeJson = JSON.stringify(outputRoutes);
-        compilation.assets['routes.json'] = {
-            source: function () {return routeJson;},
-            size: function () {return routeJson.length;}
-        };
-        callback();
-    });
-};
-
-module.exports = MustacheRendererPlugin;
-

package.json

@@ -26,7 +26,6 @@
     "express": "4.13.4",
     "express-http-proxy": "0.6.0",
     "lodash.defaults": "4.0.1",
-    "mustache": "2.2.1",
     "newrelic": "1.25.4",
     "raven": "0.10.0"
   },
@@ -53,6 +52,7 @@
     "git-bundle-sha": "0.0.2",
     "glob": "5.0.15",
     "google-libphonenumber": "1.0.21",
+    "html-webpack-plugin": "2.22.0",
     "iso-3166-2": "0.4.0",
     "json-loader": "0.5.2",
     "json2po-stream": "1.0.3",

src/template.html

@@ -6,25 +6,25 @@
         <meta charset="UTF-8" />
 
         <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <meta name="viewport" content="width={{viewportWidth}}, initial-scale=1">
+        <meta name="viewport" content="width=<%= htmlWebpackPlugin.options.config.viewportWidth %>, initial-scale=1">
 
-        <title>Scratch - {{title}}</title>
+        <title>Scratch - <%= htmlWebpackPlugin.options.config.title %></title>
 
         <!-- Prevent mobile Safari from making phone numbers -->
         <meta name="format-detection" content="telephone=no">
 
         <!-- Search & Open Graph-->
-        <meta name="description" content="{{description}}" />
+        <meta name="description" content="<%= htmlWebpackPlugin.options.config.description %>" />
         <meta name="google-site-verification" content="m_3TAXDreGTFyoYnEmU9mcKB4Xtw5mw6yRkuJtXRKxM" />
 
         <meta property="og:url" content="https://scratch.mit.edu/" />
         <meta property="og:type" content="website" />
-        <meta property="og:title" content="Scratch - {{title}}" />
+        <meta property="og:title" content="Scratch - <%= htmlWebpackPlugin.options.config.title %>" />
-        <meta property="og:description" content="{{description}}" />
+        <meta property="og:description" content="<%= htmlWebpackPlugin.options.config.description %>" />
-        <meta property="og:image" content="{{&og_image}}" />
+        <meta property="og:image" content="<%- htmlWebpackPlugin.options.config.og_image %>" />
-        <meta property="og:image:type" content="{{&og_image_type}}" />
+        <meta property="og:image:type" content="<%- htmlWebpackPlugin.options.config.og_image_type %>" />
-        <meta property="og:image:width" content="{{&og_image_width}}" />
+        <meta property="og:image:width" content="<%- htmlWebpackPlugin.options.config.og_image_width %>" />
-        <meta property="og:image:height" content="{{&og_image_height}}" />
+        <meta property="og:image:height" content="<%- htmlWebpackPlugin.options.config.og_image_height %>" />
 
         <!-- Favicon & CSS normalize -->
         <link rel="shortcut icon" href="/favicon.ico" />
@@ -40,7 +40,7 @@
             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
             })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-            ga('create', '{{&ga_tracker}}', {
+            ga('create', '<%- htmlWebpackPlugin.options.config.ga_tracker %>', {
                 'sampleRate': 10
             });
             ga('send', 'pageview');
@@ -51,11 +51,11 @@
         <div id="app"></div>
 
         <!-- Vendor & Initialize (Session & Localization)-->
-        <script src="/js/common.bundle.js"></script>
+        <script src="/<%= htmlWebpackPlugin.files.chunks.common.entry %>"></script>
 
         <!-- Scripts -->
-        <script src="/js/{{name}}.intl.js"></script>
+        <script src="/js/<%= htmlWebpackPlugin.options.route.name %>.intl.js"></script>
-        <script src="/js/{{name}}.bundle.js"></script>
+        <script src="/<%= htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.route.name].entry %>"></script>
 
         <!-- Translate title element -->
         <script>
@@ -65,7 +65,7 @@
                     loc = loc.split('-')[0];
                 }
                 if (typeof window._messages[loc] !== 'undefined') {
-                    var localizedTitle = window._messages[loc]['general.' + '{{title}}'.toLowerCase()] || '';
+                    var localizedTitle = window._messages[loc]['general.' + '<%= htmlWebpackPlugin.options.config.title %>'.toLowerCase()] || '';
                     if (localizedTitle.length > 0) {
                         document.title = 'Scratch - ' + localizedTitle;
                     }

webpack.config.js

@@ -1,7 +1,7 @@
 var autoprefixer = require('autoprefixer');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 var gitsha = require('git-bundle-sha');
-var MustacheRendererPlugin = require('./mustache-renderer-webpack-plugin');
 var path = require('path');
 var webpack = require('webpack');
 
@@ -100,12 +100,17 @@ module.exports = {
         fs: 'empty'
     },
     plugins: [
-        new VersionPlugin({length: 5}),
+        new VersionPlugin({length: 5})
-        new MustacheRendererPlugin({
+    ].concat(routes.map(function (route) {
-            templatePath: path.resolve(__dirname, './src/template.html'),
+        return new HtmlWebpackPlugin({
-            routes: routes,
+            title: route.title,
-            config: require('./src/template-config.js')
+            filename: route.name + '.html',
-        }),
+            template: './src/template.html',
+            route: route,
+            config: require('./src/template-config.js'),
+            inject: false
+        });
+    })).concat([
         new CopyWebpackPlugin([
             {from: 'static'},
             {from: 'intl', to: 'js'}
@@ -124,5 +129,5 @@ module.exports = {
         }),
         new webpack.optimize.CommonsChunkPlugin('common', 'js/common.bundle.js'),
         new webpack.optimize.OccurenceOrderPlugin()
-    ]
+    ])
 };