Чт. Янв 20th, 2022

    Webpack

    отAndrew

    Окт 9, 2020

    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-loadercss-loadersass-loadernode-sassextract-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/

    от Andrew