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

Привет, разбираюсь с 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",
                ],
            },
        ],
        
    }
}

Исходники
  • Вопрос задан
  • 119 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы