Webpack

От AndrewWeb

Webpack — инструмент веб-разработчика, который соединяет JavaScript- и CSS-файлы в единое целое — файл, который часто называется «bundle» (с англ. «пачка»).

https://webpack.js.org/ — официальный сайт

Устанавливаем Node и npm

Чтобы проверить установлен ли Node.js набираем в терминале (командной строке):

node -v

Если показывает текущую версию, то установлен, иначе устанавливаем его по инструкции ниже.

Webpack построен на Node.js, поэтому для его работы требуется запуск как Node, так и npm (node package manager — менеджер пакетов Node). Порядок действий:

  1. Скачиваем и устанавливаем Node.js с официального сайта.
  2. Для установки npm открываем командную строку (например, Терминал MacOS) и выполняем команду:
    sudo npm install -g

    Sudo и ключ -g позволяют установить модуль для всех пользователей через учётную запись администратора, но для этого потребуется ввести пароль.

  3. Выполняем:
    npm init

npm init -y - флаг y, чтобы пропустить ввод настроек, так скажем для убыстрения процесса :-)

При создании файла package.json просто нажимайте «Enter»: настройки по умолчанию приемлемые. Кроме того, при необходимости можно их изменить.

В package.json хранятся все зависимости необходимые для сборки проекта.

Когда package.json создан, вы увидите небольшой документ с настройками. В нём хранится всё, что нужно знать о себе проекту.

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Добавляем Webpack

Выполняем следующий код, чтобы добавить Webpack к проекту.

npm install webpack -D
или
npm install -D webpack webpack-cli

После чего произойдёт 3 вещи:

  1. Имя «Webpack» добавится в package.json в качестве devDependency (будет использоваться при разработке, но не в рабочей версии). Для этого указывается ключ -D.
  2. Новый каталог node_modules добавится к проекту.
  3. Webpack (файлы модуля) появятся в каталоге node_modules.

Добавляем Webpack как скрипт

Добавляем следующий скрипт в package.json:

"scripts": {
  "build": "webpack",
  "start": "webpack --watch"
},

Теперь запускаем Webpack-версию проекта через npm, выполнив npm run build и npm run start в командной строке.

В документации Webpack глобальную установку не рекомендуют. Она вынуждает разработчика использовать во всех проектах определенную версию Webpack и приводит к краху, если использовать другую версию.

Файловая структура

  1. Создаём новый каталог src в корне проекта.
  2. Создаём файл src/app.js, в котором укажем путь к нашим .js и .scss файлам.
  3. Создаём файл index.html в корне проекта.
  4. Делаем ссылку на JavaScript-файл перед тегом </body> в index.html:
    <script type="text/javascript" src="dist/bundle.js"></script>

    Делайте ссылку только на dist\bundle.js, а src\app.js включать не требуется. Дело в том, что этого файла ещё нет. Webpack сделает его для нас.

Конфигурация Webpack

  1. Создаём файл webpack.config.js в корне проекта.
  2. Копируем и вставляем следующий фрагмент кода, который подскажет Webpack, что от него нужно.
const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

«Entry» и «Output»

«Entry» (входные данные). Входной файл называется app.js и расположен в каталоге src.

«Output» (выходные данные). Это место, куда Webpack будет размещать готовый файл. Он будет называться bundle.js и появляться в каталоге dist («distribution» — с англ. «размещение»).

Изменять имена можно, но при этом необходимо синхронизировать изменения в webpack.config.js, файлах, каталогах и связанных скриптах в HTML.
В разделе module.exports можно добавить режим сборки, например:
mode: ‘development’,
то есть в этом разделе будет то, что нужно подключать например для разработчика и можно сделать режим продакшн, там прописать свои настройки.

Добавляем JavaScript

Теперь напишем код для последующей обработки с помощью Webpack:

  1. В каталоге src создаем каталог js.
  2. Внутри js создаем JavaScript-файл rainbows.js.
  3. Пишем код в rainbows.js. Например:
    console.log('This is rainbows.js')
  4. Создаём другой JavaScript-файл — unicorns.js в каталоге js.
  5. Пишем код в unicorns.js. Например:
    console.log('Hello, unicorns!')
  6. Добавляем следующий код в app.js, чтобы импортировать rainbows.js и unicorns.js:
    import './js/rainbows.js';
import './js/unicorns.js';
  7. Запускаем Webpack в Терминале командой:
    npm run build

    Теперь появился каталог dist!

    После запуска index.html в браузере откройте инструменты разработчика (Developer Tools) и посмотрите на консоль. Там будут сообщения как из rainbows.js, так и unicorns.js.

  8. npm run dev — версия разработчика

Добавляем SCSS

  1. Создаём каталог scss в src.
  2. Создаём файл base.scss в каталоге scss.
  3. Добавляем CSS-код в base.scss. Например:
    $bg-color: pink;

body {
 background: $bg-color;
}
  4. Добавляем следующий код в src/app.js, чтобы импортировать base.scss:
    import './scss/base.scss'

Чтобы Webpack прочитал sass-стили, необходимо добавить дополнительные загрузчики.

Добавляем загрузчики стилей

    1. Выполняем команду в Терминале, чтобы установить style-loader, css-loader, sass-loader, node-sass, extract-text-webpack-plugin.
      npm install style-loader css-loader sass-loader node-sass extract-text-webpack-plugin -D
    2. Добавляем плагин «Extract Text Plugin» в начало webpack.config.js. Он отвечает за перемещение CSS в отдельный файл.
      const ExtractTextPlugin = require('extract-text-webpack-plugin');
    3. Теперь указываем Webpack, что необходимо обработать .scss файлы. Он выполнит их через «Extract Text Plugin», CSS- и Sass-загрузчик. Вставляем следующий код после фигурной скобки группы «output». Обратите внимание на запятую!
      output: {
  ...
},
module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    }
  ]
}
    4. Делаем ссылку на «Extract Text Plugin» прямо перед последней фигурной скобкой. Это даст знать Webpack, что все CSS-файлы необходимо соединить в отдельный файл и назвать его «style.css».
      plugins: [
 new ExtractTextPlugin('style.css')
]

Webpack.config.js теперь выглядит так:

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
  ]
};

Расскажем HTML про всё!

  1. Делаем ссылку на CSS-файл в <head>.
    <link rel='stylesheet' href='dist/style.css'>
  2. Запускаем Webpack в Терминале.
    npm run build
  3. Открываем index.html в браузере. Если фон розовый, значит, CSS загрузился.
  4. Благодаря команде Webpack watch, которую мы добавили в npm-скрипты, обработка происходит после каждого изменения. Она будет производиться автоматически после каждого сохранения исходного файла в редакторе.
    npm run start
  5. Вносим изменения в base.scss. Например:
    $bg-color: orange;
  6. Обновляем страницу в браузере. Цвет фона меняется на оранжевый.

Добавляем и редактируем файлы

  1. Создаём файл typography.scss в каталоге src/scss.
  2. Добавляем в него немного кода SCSS. Например:
    @import url('https://fonts.googleapis.com/css?family=Roboto');

$base-font: 'Roboto';
$title-padding: 3em;

h1 {
 font-family: $base-font;
 padding: $title-padding;
}
  3. Прописываем ссылку на typography.scss в src/app.js.
    import './scss/typography.scss';
  4. Обновляем страницу в браузере. Типографика изменилась? Да, он работает!

Заключение

Существуют ещё другие способы настройки Webpack, но главное — понять принципы среды, как она в действительности работает. Выше мы рассмотрели, как составные части среды работают вместе.

На первый взгляд Webpack кажется сложным. Внимательно разберите этапы работы, и тогда вы получите понятный и полезный инструмент для создания проектов.

Источник: https://tproger.ru/translations/webpack-basics/

Дополнительно

Для того, чтобы работать с html файлами

можно использовать специальный плагин

https://webpack.js.org/plugins/html-webpack-plugin/

Cleaning up the /dist folder — очистка папки dist

https://webpack.js.org/guides/output-management/