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

Good afternoon everyone.

Began to study webpack. Decided to use the principles of bem from Yandex. How to make the connection blocks, which contain .scss, .hbs .js (in this case only .js and .hbs)?
The 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:
<div class="logo">Logo goes here.</div>

home.hbs:



 <meta charset="UTF-8">
<title>{{htmlWebpackPlugin.options.title}}</title>


{{logo}}
<hr>
 <p>Custom content goes here.</p>



I would like to build a project on methodology of bem. I.e. connect the blocks, elements, modifiers with all the dependencies and bundles to render in html.

Please tell me how to implement it in webpack?

Thanks in advance.
June 27th 19 at 15:14
1 answer
June 27th 19 at 15:16
Handlebars render either the server or the browser itself
thanks for the description of handlebars. But the question was somewhat different. Ie Handlebars are not suitable for these purposes, or do I need to use another templating engine?? If other, what and how? - Elvis.Lind87 commented on June 27th 19 at 15:19

Find more questions by tags HandlebarsJavaScriptNode.jsWebpack