Тут вы узнаете как работать с WebPack, его основы, да и в целом что это такое, для чего нужен, будет очень интересно.
Также посмотрите статью «Основы node.js», тоже очень интересна и полезная статья.
Что такое WebPack:
Давайте для начала разберём что такое WebPack. Если кратко говоря, то это сборщик проектов для JavaScript, благодаря ему вы можете просто настроить всё и быстро всё собирать в HTML файл.
Во первых, вы можете настроит его таким образом, чтобы потом не удалять кэш, что удобно в разработке, во вторых, можете сжимать конечный JS файл во время сборки, и ещё много много у него других возможностей, но об этом ниже.
Суть работы:
Суть его работы в том, что вы когда применяете настройки Webpack, используя специальные команды, то он создаёт один или более файлов, всё зависит от настроек.
Где храниться не много переделанный, например JS код, если вы использовали стандарт ES6, то webpack может автоматически создать JS файл, где будет уже храниться код в стандарте ES5, что позволяет поддерживать более большое количество старых браузеров. Точно также он работает и с SASS, LESS или другими библиотеками/фреймворками.
Установка WebPack:
Чтобы вам его установить, первым делом нужно провести интилизацию проекта на Node.js, для этого перейдите в папку где хотите создать ваш проект, и там в терминале введите специальную команду:
1 | npm init -y |
После чего у вас появиться package.json, после скачиваете сам webpack, для этого ведите эти команды в терминал:
1 | npm install webpack webpack-cli --save-dev |
Теперь добавляем в package.json, в параметр «scripts», для тех кто не знает, этот параметр нужен для назначения сокрушённого написания различных команд.
Вот что вписываем туда:
1 2 3 4 5 6 | ... "scripts": { "build": "webpack", "start": "webpack --watch" }, ... |
Первая команда у нас отвечает просто постройку проекта, вторая же будет при изменение файлов проекта автоматически его строить, это полезно, чтобы по сто раз не использовать первую команду.
Последнее создаём файл «webpack.config.js», именно в нём у нас будет храниться все настройки для сборщика проекта.
Когда вы его создали можете приступать к работе.
Как работать с WebPack:
Теперь перейдём к самой настройки webpack, для этого переходим во файл «webpack.config.js», и там пишем вот это:
1 2 3 | module.exports = { ... } |
Как видите тут по сути мы будем возвращать JavaScript объект, в котором мы cейчас будем задавать настройки.
Примечание:
Мы тут покажем только самые базовые настройки, и что для чего нужно, если нужно более подробно, то пишите в комментарии.
Также не мешало бы импортировать библиотеку «path», она нам тоже пригодиться, это делается примерно так, в самом начале:
1 | const path = require('path'); |
Теперь займёмся самыми базовыми настройками, для начала внутри нашего объекта пропишем вот это:
1 2 3 4 5 | entry: "./src/index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, 'build'), } |
Давайте разберём каждый параметр, «entry» хранит путь до JS файла в котором у нас буде происходить вся логика, параметр «output», хранит данные виде объекта куда складывать конечный результат.
Параметр «filename» хранит имя JavaScript файла, куда будет класться переделанный в ES5 код, а параметр «path» хранит папку где будут храниться все файлы, не только JS, также и PNG, CSS, SVG и даже формат шрифтов.
Следующие что вам стоит знать, о webpack, так это то, если вы хотите использовать ES6, CSS или вообще любые другие файлы, других форматов, кроме JS, то вам нужно использовать loader’ы.
Вот что нудно вписать, чтобы из подключить:
1 2 3 4 5 6 7 8 | module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, ], }, |
Как видите мы создали объект «module», внутри которого есть массив «rules», внутри которого как раз и храниться объекты которые настраиваются для работы с разными типами файлами.
В этих настройках мы храним самое главное два параметра, «test» и «use». Первый отвечает за тип файла, как видите мы его указываем виде регулярного выражения, второй за то, какие лойдары использовать.
Примечание:
Подгруздка лойдеров храниться в массиве, и если их несколько, важно знать, что их нужно подключать с права на лева, то есть у нас сначала сработает «css-loader», а потом «style-loader».
Как можете заметить, мы подключаем CSS файлы, это конечно ещё не всё, вот ещё несколько важный лойдеров:
- babel-loader — использует babel для загрузки файлов ES6;
- file-loader — для загрузки различных файлов (изображения, музыкальные дорожки и т.д.) в выходную директорию;
- style-loader — используется для загрузки стилей;
- css-loader — включает загрузку файлов стилей;
Также зайдите на официальный сайт, на страницу с лойдарами (ссылка на страницу).
Последние что стоит рассмотреть, так это плагены, это очень важный компонент Webpack, так достаточно сильно расширяю его возможности.
Например вы можете все свои JS файлы подключать прямо в HTML, или минимизировать CSS, и т.д..
Вот вам не большой пример подключения плгенов:
1 2 3 4 5 | plugins: [ new HtmlWebpackPlugin({ template: __dirname + "/src/public/index.html", }) ], |
Как видите при подключение мы создаём грубо говоря объект класса, этот объект и есть наш плаген. Все плагены храниться в массиве plugins.
Конкретно мы подключаем плаген HtmlWebpackPlugin, который нужен для создания HTML файла, но это ещё не всё, больше сможете посмотреть по ссылке.
Вывод:
В этой статье вы прочитали как работать с Webpack, точнее основы работы с ним, думаю вам было интересно и полезно.
Если что-то не понятно, то пишите в комментарии, мы дополним или напишем новую статью на тему.
Подписываетесь на соц-сети:
Оценка:
Загрузка...