Всем добрый день.
Начал изучать webpack. Решил использовать принципы bem от яндекса. Каким образом реализовать подключение блоков, которые содержат в себе .scss, .hbs, .js (в данном случае только .js и .hbs)?
Структура тестового проекта:
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
};
Директории и файлы:
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:
<!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>
Хотелось бы собирать проект по методологии bem. Т. е. подключать блоки, элементы, модификаторы со всеми зависимостями и рендерить бандлы в html.
Подскажите, пожалуйста, как это реализовать на webpack?
Заранее благодарен.
Средний
