How to render static HTML in webpack with Handlebars templating engine?

R

RaDir2017-04-07 14:37:14

JavaScript

RaDir, 2017-04-07 14:37:14

Good afternoon everyone.
Started learning webpack. I decided to use the principles of bem from Yandex. How to implement the connection of blocks that contain .scss, .hbs, .js (in this case, only .js and .hbs)?
Test project structure:
package.json:

{
  "name": "idea.test",
  "version": "1.0.0",
  "description": "Webpack test theme",
  "main": "index.js",
  "scripts": {
    "devw": "npm run clean && webpack -d",
    "devs": "webpack-dev-server",
    "prod": "npm run clean && webpack -p",
    "clean": "rimraf ./www/*"
  },
  "author": "RA.Dir",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "handlebars": "^4.0.6",
    "handlebars-loader": "^1.4.0",
    "html-webpack-plugin": "^2.28.0",
    "lodash": "^4.17.4",
    "rimraf": "^2.6.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  }
}

webpack.config.js:

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');

// Plugins options array - BEGIN
var pluginsOptions = [];
// Plugins options array - END

// HtmlWebpackPlugin options - BEGIN
var titles = {
    home: "iDea | Home",
    shop: "iDea | Shop",
    cart: "iDea | Cart"
};

for (var title in titles) {
    pluginsOptions.push(
        new HtmlWebpackPlugin({
            title: titles[title],
            template: './' + title + '/' + title + '.hbs',
            chunks: [title],
            filename: title + '.html'
        })
    );
};
// HtmlWebpackPlugin options - END

module.exports = {
    //context: __dirname + '/bundles',
    context: path.join(__dirname, '/bundles'),
    entry: {
        home: './home/home.js',
        shop: './shop/shop.js',
        cart: './cart/cart.js'
    },
    output: {
        path: path.resolve(__dirname, "www"),
        filename: '[name].js'
    },

    watch: false,

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }]
            },
            {
                test: /\.hbs$/,
                use: ['handlebars-loader']
            }
        ]
    },

    devServer: {
        contentBase: path.join(__dirname, "www"),
        compress: false,
        port: 8080,
        open: true
    },

    plugins: pluginsOptions
};

Directories and files:
idea.test (root)
-www (output, public)
-blocks
--logo
---logo.js
---logo.hbs
-bundles
--home
---home.js
---home. hbs
--shop
---shop.js
---shop.hbs
--cart
---cart.js
---cart.hbs
logo.hbs: home.hbs:
<div class="logo">Logo goes here.</div>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{htmlWebpackPlugin.options.title}}</title>
</head>
<body>
    {{logo}}
    <hr>
    <p>Custom content goes here.</p>
</body>
</html>

I would like to build a project using the bem methodology. That is, connect blocks, elements, modifiers with all dependencies and render bundles in html.
Can you please tell me how to implement this on webpack?
Thanks in advance.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

O

ozknemoy, 2017-04-07
@ozknemoy

Handlebars are rendered either by the server or by the browser itself