Может ли Webpack создать несколько файлов HTML из SCSS и Pug?

Question

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

Я создаю веб-сайты в сторонней системе электронной коммерции, и у них есть система кодирования шаблонов, которую можно использовать для изменения структуры их веб-сайта. Ниже приведен пример одного из их шаблонов, который я буду создавать (хотя мне нужно будет сделать много типов и вариаций, а не только несколько).

Моя идея упростить создание этих шаблонов - создать группу компонентов pug и поместить их в каталог компонентов /. Вне каталога компонентов я хочу сделать шаблоны мопса более высокого уровня, использующие компоненты. После того, как они будут созданы, я соберу их с помощью NPM, и файлы шаблона необходимо будет преобразовать в HTML и поместить в папку / dist.

Сложно ли это сделать с помощью веб-пакета?

Структура проекта:

src/
..components/
....header/
......header1.pug
......header1.scss
..navcustom-template.pug
..customfooter-template.pug
..non-template-specific.scss

и однажды построенный:

dist/
..navcustom-template.html
..customfooter-template.html
..non-template-specific.css

src/
..components/
....header/
......header1.pug
......header1.scss
..navcustom-template.pug
..customfooter-template.pug
..non-template-specific.scss

Образец шаблона:

<!--
    Section: NavCustom
-->

<style>

    //Template Speific CSS Imports Here

</style>
<script type="text/javascript">

    //Template Speific JS Imports Here

</script>
<header>

    <div class="col-md-4">

        // Social Media Code

    </div>

    <div class="col-md-4">

        // Logo Code

    </div>

    <div class="col-md-4">

        //  Call to Action Code

    </div>

</header>
<nav>

</nav>

Answer 1

Вы можете использовать эти пакеты (--save-dev для всех):

• raw-loader для загрузки файлов Pug
• pug-html-loader для чтения файлов Pug
• html-webpack-pug-plugin для генерации HTML из Pug
• html-webpack-plugin (стандартный загрузчик плагинов HTML)

Затем настройте Webpack, как показано ниже, где index.js - фиктивный файл, который вы должны создать, если у вас еще нет записи. Каждый шаблон Pug, который нужно обработать, записан в отдельном HtmlWebpackPlugin объекте внизу.

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname + '/dist',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          "raw-loader",
          "pug-html-loader"
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/navcustom-template.pug',
      filename: 'navcustom-template.html'
    }),
    new HtmlWebpackPlugin({
      template: 'src/customfooter-template.pug',
      filename: 'customfooter-template.html'
    }),
    new HtmlWebpackPugPlugin()
  ]
}

Все миксины Pug (ваши src/components файлы) будут включены в вывод. Этот пример протестирован и работает.

---

Редактировать: Для динамической обработки всех файлов Pug в каталоге src используйте эту конфигурацию:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');
const fs = require('fs');

let templates = [];
let dir = 'src';
let files = fs.readdirSync(dir);

files.forEach(file => {
  if (file.match(/\.pug$/)) {
    let filename = file.substring(0, file.length - 4);
    templates.push(
      new HtmlWebpackPlugin({
        template: dir + '/' + filename + '.pug',
        filename: filename + '.html'
      })
    );
  }
});

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname + '/dist',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          "raw-loader",
          "pug-html-loader"
        ]
      }
    ]
  },
  plugins: [
    ...templates,
    new HtmlWebpackPugPlugin()
  ]
}

Используется fs.readdirSync для получения всех файлов Pug в каталоге. Используется синхронная версия (в отличие от fs.readdir), потому что функция module.exports вернется до обработки файлов.