Сегодняшний мир веб-разработки процветает благодаря классным инструментам и пакетам, которые можно использовать для своих веб-приложений. Некоторыми важными частями являются объединение ваших веб-приложений, обработка минификации файлов и связанных задач для производства и, наконец, что не менее важно, перезагрузка в реальном времени (мы их любим 🤓).
В прошлом веб-разработчики использовали множество инструментов. Gulp и Grunt были бы одними из популярных инструментов, которые использовали веб-разработчики (включая меня). Кстати, мне больше всего нравится Gulp;)
В последнее время я стал большим поклонником Webpack из-за того, что он работает безупречно, а также потому, что это не просто средство выполнения задач, а отличное управление графом зависимостей, чего не было в большинстве предыдущих инструментов. Подробнее о том, когда использовать webpack и почему, можно прочитать здесь. Еще одна причина выбрать webpack - это то, что некоторые из замечательных команд, таких как Angular, перешли на webpack из-за его потрясающей производительности и возможностей.
Приступим к делу. В руководстве / руководстве предполагается, что на вашем компьютере уже установлен NodeJS. Вы можете проверить это, запустив в своем терминале:
node --version
Если все в порядке, он должен напечатать что-то вроде `v7.7.1`.
Установка
Итак, сначала давайте установим `webpack` и` webpack-dev-server` (они нам понадобятся позже) глобально на нашем компьютере.
npm install -g webpack webpack-dev-server
Обратите внимание, что это не рекомендуется. Глобальная установка привязывает вас к определенной версии webpack и может завершиться ошибкой в проектах, использующих другую версию. Подробности см. В документации по веб-пакету.
После этого создайте папку ‹my-project-name›. Я буду использовать webpack-demo в качестве папки для этого руководства.
mkdir webpack-demo cd webpack-demo
Создание проекта
Вы можете открыть эту папку в своем любимом редакторе. Сейчас у меня VSCode. Создайте файл index.html и вставьте в него следующий код
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Basic application with Webpack</title> <link href="main.css"> </head> <body> <h1>WebPack works !!</h1> <script src="bundle.js"></script> </body> </html>
Затем создайте файл в текущей папке и вставьте внутрь простой фрагмент кода:
console.log("Hello webpack. Demo works");
Вы заметите, что мы включили bundle.js
в наш index.html, но здесь мы создали main.js
. Это потому, что webpack объединит наш файл js и в конце создаст файл bundle.js
. Мы сделаем это, запустив команду
webpack main.js bundle.js
Это даст результат вроде
Hash: ec10d1136042776794c4 Version: webpack 2.6.1 Time: 71ms Asset Size Chunks Chunk Names bundle.js 2.65 kB 0 [emitted] main [0] ./main.js 19 bytes {0} [built]
Если вы откроете index.html и откроете отладчик Chrome, он будет выглядеть так
Вы также можете создать файл css, который мы включили в наш index.html. Итак, создайте main.css
в корне вашего проекта и добавьте несколько образцов стилей. Придадим странице серый фон, а заголовок - синий.
body{ background: #dcdcdc; } h1{ color: blue; }
Использование файла конфигурации webpack
Мы можем указать webpack, что делать, в файле конфигурации webpack.config.js
, и это позволит нам использовать команду webpack
без указания источника (main.js) и цели (bundle.js), и это становится более мощным, когда мы добавляем загрузчики и прочее и еще конфигурации. Мы рассмотрим это позже.
Создайте файл webpack.config.js
в своем проекте и добавьте к нему следующий базовый фрагмент:
module.exports = { entry: './main.js', output: { filename: './bundle.js' } };
Конфигурация довольно проста. entry
- это файл, который будет корнем вашего графика зависимостей и входным файлом для веб-пакета, где, поскольку output
содержит filename
выходного файла. И тогда мы используем выходной файл в нашем index.html
. Итак, как только вы закончите с этим, попробуйте запустить команду webpack
в корне вашего проекта из терминала. На консоли вы должны получить тот же результат, что и раньше.
Смотрите и строите на ходу
Вы можете указать webpack следить за вашими файлами и запускать процесс сборки, как только что-то изменится в ваших файлах, добавив watch: true
в наш webpack.config.js
. Теперь ваш файл должен выглядеть так
module.exports = { entry: './main.js', output: { filename: './bundle.js' }, watch: true };
Вы можете запустить командуwebpack
сейчас, и если вы что-нибудь измените в своем main.js
, webpack перекомпилирует и соберет bundle.js
.
Сервер разработки
Более крутые штуки. Поскольку открывать index.html
сейчас слишком старомодно, и мы постоянно обновляем в процессе разработки, мы можем сделать это, просто используя webpack-dev-server
, который мы установили ранее. К нему прилагается небольшое express
приложение, так что вы просто предоставляете свой файл javascript, и все готово. Просто в корне вашего проекта из терминала запустите команду ниже
webpack-dev-server
Бум! Теперь ваш проект можно увидеть на http: // localhost: 8080 / webpack-dev-server /
Что удивительно, если вы внесете какие-либо изменения в свой main.js
или main.css
, сервер будет перезагружен, и вам не придется делать ctrl+R / command+R
каждый раз. Попробуй это !
Погрузчики
Загрузчики можно рассматривать как задачи, как и в других предыдущих инструментах. Их можно использовать для таких вещей, как require()
загрузка других модулей и файлов. Webpack не включает загрузчиков из коробки. И в любом случае этого не должно быть, потому что он станет намного тяжелее. Однако есть много загрузчиков, которые можно установить с помощью npm
или yarn
. В этом руководстве мы будем использовать npm
, а также babel-loader
для написания кода ES6 и будем использовать css-loader
и style-loader
для import
нашего main.css
файла внутри нашего main.js
.
Откройте терминал из корня проекта и выполните следующие команды.
npm init -y npm install --save-dev babel-loader babel-core babel-preset-env npm install --save-dev css-loader style-loader
npm init -y
создает package.json
в вашем проекте, который мы будем использовать для сохранения зависимостей разработки и добавления загрузчиков в наш проект.
npm install --save-dev babel-loader css-loader style-loader
устанавливает эти загрузчики через npm
и сохраняет их в папке node_modules
внутри нашего проекта.
Теперь, чтобы работать с установленными загрузчиками, мы должны сообщить нашему webpack.config.js
, чтобы они использовали их при создании сборок или при запуске веб-сервера. Мы сделаем это, изменив наш файл конфигурации следующим образом:
module.exports = { entry: './main.js', output: { filename: './bundle.js' }, watch: true, module: { rules: [ { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] },{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env'] } } }] } };
Теперь мы можем написать код ES6 в нашем main.js
, который будет компилироваться в ES5. Измените содержимое файла main.js
на следующее
import style from './main.css'; const appName = 'Webpack Demo App'; setTimeout( () => alert(`Thanks for using ${appName}`) , 500);
Приведенный выше код будет скомпилирован в javascript ES5 и будет включен в bundle.js
Для CSS мы можем удалить <link href="main.css>
из нашего index .html, поскольку мы уже импортировали его в наш main.js
Заключение
Webpack - отличный инструмент для веб-разработки, поскольку он работает со многими пакетами, чтобы сделать разработку быстрой и простой. Если это руководство вам помогло, порекомендуйте его, подпишитесь на меня в twitter и github. Вы также можете связаться со мной в LinkedIn.