Как правильно настроить несколько страниц в Webpack?

Question

Я пытаюсь создать базовый c сайт, используя только Webpack. Моя цель - создать простую структуру URL, например example.com/about, example.com/contact.

. В Webpack я могу использовать HTMLWebpackPlugin, но мне нужно создать экземпляр для каждого маршрута. Итак, мой вопрос: есть ли способ упростить это?

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        port: 5000,
    },
    plugins: [
        new htmlWebpackPlugin({
            title: 'Home',
            filename: 'index.html',
            template: './src/pages/home/index.html',
        }),
        new htmlWebpackPlugin({
            title: 'About',
            filename: 'about/index.html',
            template: './src/pages/about/index.html',
        }),
    ],
};

Answer 1

Ваш файл конфигурации Webpack javascript. Таким образом, вы можете добавить некоторые вспомогательные функции для абстрагирования процесса и в конечном итоге просто подключить массив страниц, который даст желаемый эффект:

const htmlWebpackPlugin = require('html-webpack-plugin');

const generateHtmlPlugin = (title) => {
  return new htmlWebpackPlugin({
    title,
    filename: 'index.html',
    template: `./src/pages/${title.toLowerCase()}/index.html`,
  });
}

const populateHtmlPlugins = (pagesArray) => {
  res = [];
  pagesArray.forEach(page => {
    res.push(generateHtmlPlugin(page));
  })
  return res;
}

Так что это не слишком много кода, и он позволит вам просто вставьте массив нужных вам страниц при настройке веб-пакета:

const pages = populateHtmlPlugins(["About", "Articles", "Users", "Contact"]);

module.exports = {
  //...
  plugins: pages
}

Еще лучше, вы можете создать папку utils и рефакторинг кода в два экспортируемых модуля, а затем просто импортировать populateHtmlPlugins() в ваш файл конфигурации webpack и оставайтесь очень чистыми.

Теперь вы можете создать столько страниц, сколько захотите.