Сборка многостраничного сайта на webpack?

Question

[Ярослав Дмитриев]

Привет, разбираюсь с webpack, для одностраничников все понятно, инфы миллион на это, но вот с многостраничными сайтами не так все глатко
В общем суть такова, есть страницы, у каждой страницы свои стили, js
Набросал webpack, мучался, гуглил но не смог найти как нормально реализовать сборку под многостраничники
Сейчас проект собирается вроде все ок (про режимы знаю, просто не стал писать), но на страницы подключается весь js сразу, т.е. для страницы index грузится и index js и about js, также не подтягиваются стили
Если есть статьи или доки для многостраничников прошу поделится, т.к за 2 дня 0 сдвигов
package.json

{
  "name": "last-chanse",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "sass": "^1.32.5",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0"
  }
}

webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const generateHtmlPlugin = (title) => {
  return new htmlWebpackPlugin({
    title,
    filename: `${title.toLowerCase()}.html`,
    template: `./src/pages/${title.toLowerCase()}/${title.toLowerCase()}.html`,
    minify: {
        collapseWhitespace: false,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
    }
  });
}

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

const pages = populateHtmlPlugins(["index", "about"]);

module.exports = {
    entry: {
        index: path.resolve(__dirname, './src/pages/index/index.js'),
        about: path.resolve(__dirname, './src/pages/about/about.js'),
    },
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: '[name].bundle.js',
    },
    plugins: [
        ...pages,
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [
            // JavaScript
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
        ],
        
    }
}

Исходники

Comments

[Just Me]

что ты имеешь в виду под многостраничником? SPA обычное?

если тебе надо разные js файлы для разных страниц, то на несколько точек входа делаешь несколько точек выхода

и для 5 вебпака главный файл конфигурации называется webpack.common.js, а прод и дев раскиданы по другим файлам