Настройка webpack для MPA?

Настройка Webpack для MPA (Multipage Application) предполагает использование нескольких точек входа (entry points) и настройку соответствующих выходных файлов (output files) для каждой страницы вашего приложения.

Вот как вы можете настроить Webpack для MPA:

1. Установите Webpack и связанные пакеты, такие как webpack-cli и webpack-dev-server, если они еще не установлены:

   npm install webpack webpack-cli webpack-dev-server --save-dev

2. Создайте конфигурационный файл webpack.config.js в корневой директории вашего проекта. Этот файл будет содержать настройки Webpack. Ниже приведен пример базовой конфигурации:

   const path = require('path');

   module.exports = {
     entry: {
       page1: './src/page1.js',
       page2: './src/page2.js',
     },
     output: {
       filename: '[name].bundle.js',
       path: path.resolve(__dirname, 'dist'),
     },
   };

Здесь мы указываем две точки входа page1.js и page2.js, которые находятся в директории src. Выходные файлы будут иметь имена, соответствующие точкам входа, и будут сохранены в директории dist.

3. В вашем package.json добавьте следующие скрипты для запуска Webpack и Webpack Dev Server:

   "scripts": {
     "start": "webpack-dev-server --open",
     "build": "webpack"
   }

Теперь вы можете запустить npm start для запуска разработческого сервера Webpack Dev Server или npm run build для сборки проекта.

4. Создайте HTML-файлы для каждой страницы вашего приложения в директории src. Например, page1.html и page2.html. В этих файлах вы можете добавить необходимые теги для загрузки выходных файлов вашей сборки (например, <script src="page1.bundle.js"></script>).

5. Добавьте секцию plugins в файл конфигурации Webpack для создания HTML-файлов автоматически:

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

   module.exports = {
     // ...
     plugins: [
       new HtmlWebpackPlugin({
         filename: 'page1.html',
         template: './src/page1.html',
         chunks: ['page1']
       }),
       new HtmlWebpackPlugin({
         filename: 'page2.html',
         template: './src/page2.html',
         chunks: ['page2']
       }),
     ],
     // ...
   };

Этот код создаст HTML-файлы для каждой страницы вашего приложения, включая соответствующие скрипты. Он также указывает на использование соответствующих точек входа (chunks) для каждой страницы.

Теперь ваша настройка Webpack для MPA готова к работе! Когда вы запустите npm start, вы увидите страницы вашего приложения в вашем браузере, и при изменении файлов в директории src Webpack автоматически пересоберет ваш проект и обновит страницу. Когда вы будете готовы развернуть ваше приложение, запустите npm run build, и Webpack создаст оптимизированные выходные файлы в директории dist, которые можно загрузить на ваш сервер.