Как сделать отображение на desktop и мобильном телефоне как в gulp только на webpack?

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

1. Установите необходимые зависимости:

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

2. Создайте конфигурационный файл для Webpack в корневой папке вашего проекта (например, webpack.config.js) и настройте ее:

   const path = require('path');

   module.exports = {
     entry: './src/index.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js'
     },
     module: {
       rules: [
         // Добавьте необходимые правила для обработки файлов (например, для CSS и изображений)
       ]
     },
     devServer: {
       contentBase: path.join(__dirname, 'dist'),
       port: 3000
     }
   };

3. Создайте папку src в корневой папке проекта и файл index.js внутри нее. В этом файле вы можете импортировать необходимые модули и настройки для вашего проекта.

4. Создайте дополнительные файлы и папки для различных медиа-запросов, например, desktop.css и mobile.css в папке src и импортируйте их в index.js:

   import './desktop.css';
   import './mobile.css';

5. Внутри файлов desktop.css и mobile.css вы можете добавить специфический стиль для десктопа и мобильного устройства соответственно.

6. В файле index.html (находящемся в папке dist или указанной папке вывода в конфигурации Webpack) добавьте несколько <div> элементов с разными классами для примера:

   <div class="desktop">Desktop content</div>
   <div class="mobile">Mobile content</div>

7. В вашем файле index.js добавьте JavaScript код, чтобы показывать и скрывать соответствующие блоки в зависимости от размера экрана:

   function showContent() {
     const desktopContent = document.querySelector('.desktop');
     const mobileContent = document.querySelector('.mobile');

     if (window.innerWidth < 768) {
       desktopContent.style.display = 'none';
       mobileContent.style.display = 'block';
     } else {
       desktopContent.style.display = 'block';
       mobileContent.style.display = 'none';
     }
   }

   showContent();
   window.addEventListener('resize', showContent);

Этот код будет скрывать или показывать содержимое на основе ширины окна браузера. Если ширина окна меньше 768px, тогда блок с классом desktop будет скрыт, а блок с классом mobile будет показан. В противном случае, блок с классом desktop будет показан, а блок с классом mobile будет скрыт.

8. Запустите разработческий сервер Webpack, выполнив команду npx webpack-dev-server. Он будет запущен на порту 3000.

Теперь, при открытии вашего проекта в браузере, содержимое будет отображаться исходя из размера окна браузера. При изменении размера окна содержимое будет автоматически изменяться согласно настройкам JavaScript кода.

Это базовый пример использования Webpack для отображения разных содержимых на десктопе и мобильном устройстве. Вы можете дополнить его дополнительными настройками и правилами в зависимости от потребностей вашего проекта.