Webpack
Webpack – это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей. Он не ограничивается одним только фронтендом, его также успешно применяют в бэкенде разработке на Node.js. Вам достаточно указать точку входа в вашу программу (это может быть даже HTML-файл с тегами <script>), а webpack проанализирует файлы и объединит их в один исходный JavaScript-файл, содержащий все необходимое для запуска программы.
Настройка Webpack на новом проекте. Команда npm init -y (или npm init –yes) используется для быстрой инициализации нового проекта Node.js в текущей папке. Она автоматически создаёт файл package.json с настройками по умолчанию, не задавая пользователю вопросов о названии проекта, версии, описании и других параметрах.
npm init -y
Установка Webpack локально или глобально
Webpack может быть установлен глобально или локально для каждого проекта.
Глобальная установка webpack и webpack-cli (интерфейс командной строки для Webpack) и ключом -g.
npm install -g webpack webpack-cli
Локальная установка - это рекомендуемый способ установки, поскольку webpack может обновляться в каждом проекте по отдельности и у вас возникнет меньше проблем. Локальная установка применяется в рамках конкретного проекта и сохраняет зависимости в папке node_modules и в package.json. Это лучший способ, так как позволяет использовать разные версии Webpack в разных проектах.
npm install --save-dev webpack webpack-cli
–save-dev или сокращённо -D — добавляет пакеты в devDependencies.
Настройка webpack.config.js
npm install --save-dev webpack webpack-cli mini-css-extract-plugin css-loader sass-loader sass terser-webpack-plugin css-minimizer-webpack-plugin babel-loader @babel/core @babel/preset-env
Этот конфиг:
- Webpack соберёт JS из src/js/main.js в dist/bundle.js с минификацией.
- SCSS из src/sass/style.scss будет скомпилирован и минифицирован в dist/styles.css.
- В dist/index.html автоматически подключатся bundle.js и styles.css.
- Включён вотчер для автоматической пересборки при изменениях.
- Генерируются source map для удобной отладки.
Такой подход покрывает все ваши требования по сборке и оптимизации.
const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'production', // включает оптимизацию и минификацию entry: './src/js/main.js', // точка входа JS output: { filename: 'bundle.js', // итоговый JS path: path.resolve(__dirname, 'dist'), clean: true, // очистка dist перед сборкой }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', // если нужен транспилятор (опционально) options: { presets: ['@babel/preset-env'], }, }, }, { test: /\.(sa|sc|c)ss$/, // обработка SCSS и CSS use: [ MiniCssExtractPlugin.loader, // извлекает CSS в отдельный файл 'css-loader', // обрабатывает импорты CSS 'sass-loader', // компилирует SCSS в CSS ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: 'styles.css', // итоговый CSS-файл }), new HtmlWebpackPlugin({ template: './src/index.html', // шаблон HTML inject: 'body', // подключить скрипты перед </body> }), ], optimization: { minimize: true, minimizer: [ new TerserPlugin(), // минификация JS new CssMinimizerPlugin(), // минификация CSS ], }, watch: true, // вотчер — пересборка при изменениях devtool: 'source-map', // source map для удобной отладки };
Запустите сборку командой в терминале из корня проекта:
npm run build
Эта команда запустит Webpack, который по умолчанию найдёт файл webpack.config.js в корне и выполнит сборку согласно его настройкам.
Если хотите запустить Webpack в режиме наблюдения (watch), чтобы он автоматически пересобирал проект при изменениях:
npm run watch
📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.
📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.
💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!7 Самых Популярных Статей
- Как запустить скрипты и веб-приложения на Python
- Что такое страны TIER 1,2,3
- 7 способов сравнения файлов по содержимому в Windows или Linux
- Установка и тестирование веб-панели HestiaCP
- Китайский VPN Shadowsocks простая установка и настройка
- top, htop, atop определение загрузки ОС (Load average, LA)
- Использование rsync в примерах