and_smi
@and_smi
Just specialist

Как настроить Twig в Webpack?

Здравствуйте, занимаюсь сборкой проекта на вебпаке, подключил к нему twig-loader и twig-html-loader.

Конфигурация сборки следующая:
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const resolvePath = place => {
  return path.resolve(__dirname, place);
};

module.exports = {
    context: resolvePath('app'),
    entry: resolvePath('main.js'),
    output: {
        filename: './js/bundle.[hash].js',
        path: resolvePath('public')
    },
    plugins: [
        new HTMLWebpackPlugin({
            title: 'WebPack',
            template: './twig/index.twig'
        }),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test:/\.twig$/,
                use: [
                    'raw-loader',
                    {
                        loader: 'twig-html-loader',
                        options: {
                            data: {
                                page: {
                                    title: 'page title'
                                },
                                title: 'hello'
                            },
                            namespaces: {
                                layouts: path.resolve(__dirname, './app/twig/templates'),
                                components: path.resolve(__dirname, './app/twig/components')
                            }
                        }
                    }
                ]
            }
        ]
    }
};


При компиляции кода в дев режиме, у меня получается код такого вида:
<body>
        <header>
        Шапка
    </header>
    <main>
            <p>
        <a href="/index.html">Главная</a>
    </p>

    </main>
    <footer>
        Подвал
    </footer>
    <script type="text/javascript" src="./js/bundle.30e46863c97b9f1fb740.js"></script></body>


Вопрос в следующем, я не понимаю, как можно настроить вид кода таким образом, чтобы:
1. Он был минифицирован (задать minify true для html-webpack-plugin не работает)
2. Чтобы он нормально отображался для разработки, то есть вместо того, что скинул должно быть следующее:
<body>
    <header>
        Шапка
    </header>
    <main>
         <p>
            <a href="/index.html">Главная</a>
         </p>
    </main>
    <footer>
        Подвал
    </footer>
    <script type="text/javascript" src="./js/bundle.30e46863c97b9f1fb740.js"></script>
</body>


index.twig:
{% extends "layouts::_template.twig" %}

{% block content %}
    <p>
        <a href="/index.html">Главная</a>
    </p>
{% endblock %}

_template.twig:
<code lang="html">
{% block html %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ page.title }}</title>
</head>
<body>
    {% block body %}
    <header>
        Шапка
    </header>
    <main>
        {{ block('content') }}
    </main>
    <footer>
        Подвал
    </footer>
    {% endblock %}
</body>
</html>
{% endblock %}
</code>


То есть не где попало отступы, а по нормальному выставлять отступы. Такое возможно?
  • Вопрос задан
  • 16 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
OnederX Москва
от 100 000 до 160 000 ₽
от 50 000 до 120 000 ₽
ITSumma Иркутск
от 30 000 до 70 000 ₽