Webpack зарекомендовал себя как неотъемлемая часть цепочки инструментов JavaScript. Он имеет более 55 000 звезд на GitHub и используется многими крупными игроками в мире JavaScript, такими как React и Angular.
Однако вам не нужно использовать интерфейсную платформу или работать над крупномасштабным проектом, чтобы воспользоваться ее преимуществами. Webpack — это, прежде всего, упаковщик, и поэтому вы также можете использовать его для сборки практически любого ресурса или актива, о котором вы думаете.
В этой статье я покажу вам, как установить и настроить
Но почему вы хотите это сделать?
Хороший вопрос. Рад, что вы спросили!
Одной из причин этого является минимизация количества
Webpack также упрощает минимизацию вашего кода, еще больше уменьшая его размер, и позволяет вам писать свои активы в любом виде, который вы пожелаете. Например, в этой статье я покажу, как заставить webpack транспилировать современный JavaScript в ES5. Это означает, что вы можете писать JavaScript, используя самый последний, самый современный синтаксис (хотя он может быть еще не полностью поддержан), а затем обслуживать браузеры ES5, которые будут работать практически везде.
И, наконец, это веселое учебное упражнение. Независимо от того, используете ли вы
Вставай и беги
Первое, что вам нужно, это установить Node и npm на ваш компьютер. Если у вас еще нет Node, вы можете загрузить его с
Нам также понадобится скелет проекта для работы. Вот один, который я сделал ранее. Чтобы запустить его на своем компьютере, вам следует клонировать проект с GitHub и установить зависимости:
git clone https://github.com/sitepoint-editors/webpack-static-site-example
cd
npm install
Это установит jQuery, а также Slick Slider и Lightbox2 — два плагина, которые мы будем использовать на сайте — в node_modulesпапку в корне проекта.
После этого вы можете открывать index.htmlв браузере и перемещаться по сайту. Вы должны увидеть
Наш статический сайт
Если вам нужна помощь в выполнении любого из вышеперечисленных шагов, почему бы не зайти на наши форумы и не задать вопрос.
Введение Webpack в проект
Следующее, что нам нужно сделать, это установить webpack. Мы можем сделать это с помощью следующей команды:
npm install
Это установит webpack и интерфейс командной строки webpack и добавит их в devDependencyраздел вашего package.jsonфайла:
«devDependencies»: {
«webpack»: «^5.1.3»,
«
}
Далее мы создадим distпапку, которая будет содержать наш связанный JavaScript:
mkdir dist
Теперь мы можем попробовать запустить webpack из командной строки, чтобы убедиться, что он настроен правильно:
. /node_modules/webpack/bin/webpack.js. /src/js/main.js —
Здесь мы говорим webpack собрать содержимое src/js/main.jsв dist/bundle.js. Если все установлено правильно, вы должны увидеть примерно такой вывод в командной строке:
asset bundle.js 1.04 KiB [emitted] (name: main)
. /src/js/main.js 192 bytes [built] [code generated]
webpack 5.1.3 compiled successfully in 45 ms
И webpack создаст bundle.jsфайл в distпапке. Если вы посмотрите на этот файл в выбранном вами текстовом редакторе, вы увидите кучу шаблонов и содержимого main.jsвнизу.
Автоматизация нашей установки
Если бы нам приходилось вводить все вышеперечисленное в терминал каждый раз, когда мы хотим запустить
В package.json, измените scriptsсвойство, чтобы оно выглядело следующим образом:
«scripts»: {
«test»: «echo \»Error: no test specified\» && exit 1»,
«build»: «webpack. /src/js/main.js —
},
Обратите внимание, что мы можем не указывать полный путь к модулю
Создайте файл конфигурации Webpack
Обратите внимание, как мы передаем путь к файлу для пакета и путь к выходному файлу в качестве аргументов для
Создайте webpack.config.jsфайл в корне проекта:
touch webpack.config.js
И добавьте следующий код:
module.exports = {
entry: '. /src/js/main.js’,
mode: ‘development’,
output: {
path: `${__dirname}/dist`,
filename: ‘bundle.js’,
},
};
И измените скрипт npm на следующий:
«scripts»: {
...
«build»: «webpack»
},
Мы webpack.config.jsэкспортируем объект конфигурации, который указывает точку входа, режим, в котором должен работать
Включая комплект
Теперь, когда у нас есть
touch src/js/app.js
Добавьте следующее app.js:
require ('. /main.js’) ;
И измените конфигурацию
entry: '. /src/js/app.js’,
Запустите npm run buildснова, чтобы воссоздать пакет. Все должно работать как прежде.
Теперь, если вы посмотрите index.html, вы заметите, что с точки зрения JavaScript происходит не так много. Внизу файла мы включаем jQuery и файл с именем main.js, который отвечает за отображение дополнительной информации, когда вы нажимаете ссылку «Подробнее... «.
Давайте отредактируем, index.htmlчтобы включить пакет вместо файла main.js. Посмотрите в конец файла. Тебе следует увидеть:
Измените это на:
Обновите страницу в браузере и убедитесь, что ссылка Читать дальше...
Связывание jQuery
Далее добавим jQuery в комплект. Это уменьшит количество
window. $ = require (‘jquery’) ;
require ('. /main.js’) ;
Здесь нам требуется jQuery, но поскольку мы установили его с помощью npm, нам не нужно указывать полный путь. Мы также добавляем его обычный $псевдоним в глобальный windowобъект, чтобы он был доступен другим сценариям. Мы требуем main.jsпосле jQuery, так как первый зависит от второго, а порядок важен.
Изменить index.html, чтобы удалить тег скрипта jQuery:
Запустите npm run buildи еще раз обновите страницу в браузере, чтобы убедиться, что ссылка Читать дальше... все еще работает. Оно делает? Хорошо!
Измерение нашего прогресса
Говорить о производительности — это хорошо, но это мало что значит, если вы не установите
Нажмите F12клавишу, чтобы открыть инструменты разработчика, затем убедитесь, что выбрана вкладка «Сеть «. Затем нажмите и удерживайте символ перезагрузки рядом с адресной строкой (круг со стрелкой) и выберите «Очистить кэш и жесткая перезагрузка». Вы должны увидеть
Инструменты разработчика Chrome, отображающие количество сетевых запросов
Как вы можете видеть на панели в нижней части окна, делается восемь запросов (мы уже сократили один, добавив jQuery в наш пакет), и в общей сложности по сети передается 557 КБ.
Связывание CSS
Глядя на index.html, единственная вещь, которую мы запрашиваем по сети, — это CSS. Как видите, мы включаем main.cssвверху страницы, а этот файл, в свою очередь, импортирует еще четыре файла CSS.
Хотя в своей стандартной конфигурации webpack может работать только с JavaScript, мы можем использовать
Загрузчики — это преобразования, которые применяются к исходному коду модуля. Они позволяют предварительно обрабатывать файлы по мере importих загрузки или «загружать». Таким образом, загрузчики похожи на «задачи» в других инструментах сборки и предоставляют мощный способ обработки этапов сборки интерфейса. Загрузчики могут преобразовывать файлы с другого языка (например, TypeScript) в JavaScript или загружать встроенные изображения в виде
Итак, изменим app.js:
// CSS
require ('.../css/main.css’) ;
// JavaScript
window. $ = require (‘jquery’) ;
require ('. /main.js’) ;
И нам нужно изменить webpack.config.js, чтобы сообщить ему, какой загрузчик запускать, когда он встречает файл, оканчивающийся на.css:
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: [
‘
‘
],
},
],
},
};
Как видите, я указал два загрузчика:
...
