Сегодняшний мир веб-разработки процветает благодаря классным инструментам и пакетам, которые можно использовать для своих веб-приложений. Некоторыми важными частями являются объединение ваших веб-приложений, обработка минификации файлов и связанных задач для производства и, наконец, что не менее важно, перезагрузка в реальном времени (мы их любим 🤓).

В прошлом веб-разработчики использовали множество инструментов. 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.