Всем привет, давно хотел написать какой-нибудь познавательный материал на форуме, но не хватало либо знаний, либо времени. Не будем устраивать холивар о том, что лучше использовать webpack или vite, или не дай бог rollup)))
Подобный материал на этом форуме не видел, только на другом, но там довольно все поверхностно. Напишите, где я ошибся и я максимально быстро изменю, буду за это чрезмерно благодарен.
Начнем с теории. Webpack - это сборщик модулей NodeJS, но я объясню более подробно зачем он необходим в разработке. Во-первых, вспомним про кражу клиентского кода, который каждый раз скачивается пользователю перед входом. Естественно обфускация вас не спасет и получить примерный код все равно смогут, но это дает +1 к броне от ленивых игроков желающих помешать вашему творению раскрыться пользователю. А помимо этого опытный разработчик любит порядок, поэтому легко можем разделить исходный код и готовый бандл. Бандл? Это один огромный index.js в котором собран весь клиент или сервер. Докинем еще то, что минифицированные файлы меньше весят, а значит быстрее скачиваются. Оп-оп, на 2 секунды быстрее скачали файлы сервера и все рады.
Создаем в корне сервера папку src_server (туда мы будем писать наш код, который потом будет отправляться на сервер.). Я не буду объяснять почему нужно хранить на сервере желательно все файлы минифицированные и не только.
Далее устанавливаем наш webpack в проект. Заходим в папку с проектом, зажимаем шифт и нажимаешь ПКМ по пустому месте в папке, выбираем "открыть окно PowerShell здесь", вводим.
Я не буду объяснять каждый флаг npm пакетов, если что-то непонятно, то нажимаешь по тексту клик.
Теперь в папке с исходниками сервера мы имеем webpack, нужно задать ему ряд инструкций перед началом работы. Для этого в корне src_server создаем файл с названием webpack.config.js, заходим в него. После этого создадим папку где будут лежать отдельно исходники сервера с названием src. Для примера я напишу простой код, который мы будем отправлять в папку packages в
корне проекта.
Структура файлов:
Ниже вы увидите объект, который мы экспортируем с комментариями
Практически все, теперь в папке src_server открываем package.json, находим объект scripts и вносим изменения
Итог, который у нас получился
И это финал. Я бы мог написать еще кучу текста с использованием babel, различные плагины, но я дал пищу для размышления и теперь вы можете искать необходимый материал в документации или на ютуб. Официальная документация Webpack - https://webpack.js.org/
Подобный материал на этом форуме не видел, только на другом, но там довольно все поверхностно. Напишите, где я ошибся и я максимально быстро изменю, буду за это чрезмерно благодарен.
Начнем с теории. Webpack - это сборщик модулей NodeJS, но я объясню более подробно зачем он необходим в разработке. Во-первых, вспомним про кражу клиентского кода, который каждый раз скачивается пользователю перед входом. Естественно обфускация вас не спасет и получить примерный код все равно смогут, но это дает +1 к броне от ленивых игроков желающих помешать вашему творению раскрыться пользователю. А помимо этого опытный разработчик любит порядок, поэтому легко можем разделить исходный код и готовый бандл. Бандл? Это один огромный index.js в котором собран весь клиент или сервер. Докинем еще то, что минифицированные файлы меньше весят, а значит быстрее скачиваются. Оп-оп, на 2 секунды быстрее скачали файлы сервера и все рады.
Создаем в корне сервера папку src_server (туда мы будем писать наш код, который потом будет отправляться на сервер.). Я не буду объяснять почему нужно хранить на сервере желательно все файлы минифицированные и не только.
Далее устанавливаем наш webpack в проект. Заходим в папку с проектом, зажимаем шифт и нажимаешь ПКМ по пустому месте в папке, выбираем "открыть окно PowerShell здесь", вводим.
Код:
cd src_server
npm init -y
npm i webpack webpack-cli -DЯ не буду объяснять каждый флаг npm пакетов, если что-то непонятно, то нажимаешь по тексту клик.
Теперь в папке с исходниками сервера мы имеем webpack, нужно задать ему ряд инструкций перед началом работы. Для этого в корне src_server создаем файл с названием webpack.config.js, заходим в него. После этого создадим папку где будут лежать отдельно исходники сервера с названием src. Для примера я напишу простой код, который мы будем отправлять в папку packages в
корне проекта.
Структура файлов:
Ниже вы увидите объект, который мы экспортируем с комментариями
Практически все, теперь в папке src_server открываем package.json, находим объект scripts и вносим изменения
JSON:
"scripts": {
"dev": "npx webpack --mode development --watch", // при выполнении команды npm run dev мы запускаем сборку проекта и при последующих изменениях проект сам будет проводить билд
"build": "npx webpack --mode production" // получаем при команде build минифицированные файлы сервера
},Итог, который у нас получился
JavaScript:
(()=>{var r={17:()=>{},127:()=>{},417:()=>{}},t={};function e(o){var n=t[o];if(void 0!==n)return n.exports;var p=t[o]={exports:{}};return r[o](p,p.exports,e),p.exports}e(17),e(127),e(417)})();И это финал. Я бы мог написать еще кучу текста с использованием babel, различные плагины, но я дал пищу для размышления и теперь вы можете искать необходимый материал в документации или на ютуб. Официальная документация Webpack - https://webpack.js.org/
