#4 Сборщик модулей webpack. Разбираемся с шаблонами. Часть 4

Всем привет! Сегодня мы продолжаем изучать webpack. А именно - подключение шаблонов в наши модули.

Из шаблонизаторов я предпочитаю использовать handlebars в разработке, так как он очень строгий и не дает писать в шаблонах то, чего там быть не должно, например, какие-нибудь вычисления, или объявления переменных.

Для начала нам необходимо установить пакет

npm install handlebars-loader --save-dev

Тепрь нам нужно добавить новый загрузчик в файл конфига. В регулярке указываем файлы с расширением .hbs, то есть handlebars. Добавим loader и exclude

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: ['node_modules']
    },
    module: {
        loaders: [
            {
                test: /\.js/,
                loader: 'babel',
                exclude: /(node_modules|bower_components)/
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            },
            {
                test: /\.hbs/,
                loader: 'handlebars-loader',
                exclude: /(node_modules|bower_components)/
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('bundle.css');
    ]
};

Впринципе, это все, что нам нужно для подключения наших шаблонов.

Теперь, чтобы заимпортить handlebars - подключим его в наш main.js

import template from '/.main.hbs';

Теперь давайте создадим этот файл main.hbs и напишем в нем, например

<h1>Hello {{name}}</h1>

Знаки двойных фигурных скобок {{}} - нам нужны для того, чтобы передавать в handlebars какие-то переменные извне. В данном случае - это будет переменная name.

Теперь, все что нам осталось - это собрать webpack и теоретически у нас должна быть доступна переменная template. Для этого выведем

console.log('template', template()).

import _ from 'lodash';
inport template from '/.main.hbs';

console.log('template', template({name: 'webpack'}));

console.log(_.isEqual(1, 2));

var obj = {
    field: 111,
    someFn() {
        console.log('someFn');
    }
};

obj.someFn();

В результате выполнения данной операции мы получаем функцию и в нее мы можем передавать какие-то объекты. В данном случае, мы хотим передать объект и в нем будет проперти name.

То есть сейчас мы выведем в консоль наш шаблон, который будет скомпилирован и внутрь, в нашу функцию, передаем name, значение которого будет строка webpack.

Теперь, давайте пропишем в консоли

webpack

Мы видим, что bundle.js у нас отлично собрался. И теперь, если мы посмотрим в браузере, то в консоли мы увидим наш темплейт. То есть шаблон отлично подгрузился, он у нас находится в нашем bundle.js файле. Мы можем на него посмотреть и увидеть как выглядит стандартный handlebars шаблон в виде функции.

Таким образом вы можете любой шаблон также легко импортить в абсолютно любой модуль.