Понять основы Webpack с нуля

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

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

Как я справился с этим

Что хорошо сработало для меня, так это создание простого репозитория javascript с нуля, а затем попытка применить к нему Webpack и, конечно же, поиск в Google и чтение документации Webpack, когда это необходимо, поскольку они были водой (или хорошим просекко!)

Теперь мы собираемся создать простое репо с нуля и поиграться с Webpack, чтобы понять его основы.

Что я использовал для этого проекта

[Node.js] (https://nodejs.org/en/),

[Пряжа] (https://yarnpkg.com/lang/en/)

Давайте начнем!

Папка и package.json

  • Создайте папку под названием basic-webpack-bundle.
  • Внутри него создайте package.json, выполнив команду
npm init -y
  • Установить Webpack

В этом руководстве я использовал Webpack 4 и Webpack-cli 3.
См. Следующие версии пакетов, чтобы следовать этому руководству: package.json project.

Даже если мы не используем здесь Webpack 5, это все равно отличное руководство для понимания того, как работает Webpack!
Наконец, Webpack4 все еще широко используется!

yarn add [email protected]
yarn add [email protected]

Создайте файл конфигурации Webpack

[Документ Webpack] (https://webpack.js.org/).

По умолчанию веб-пакет не требует использования файла конфигурации. Однако он будет предполагать, что точкой входа вашего проекта является src/index.js, и выдаст результат в dist/main.js уменьшенном виде и оптимизированном для производства.

После установки базовых пакетов Webpack создайте
webpack.config.js внутри корневой папки, которая, как следует из названия, является конфигурацией для нашего любимого сборщика пакетов.

После создания добавьте следующий код

const path = require(‘path’);
module.exports = {
  entry: ‘./src/index.js’,
  output: {
    path: path.resolve(__dirname, ‘dist’),
    filename: ‘bundle.js’
  }
};

Ok! А теперь давайте сделаем глубокий вдох и вместе посмотрим, что здесь происходит.

В первой строке требуется « path», который поставляется с NodeJs.

Путь = Модуль пути предоставляет утилиты для работы с путями к файлам и каталогам.
Например, он используется для разрешения абсолютного пути к корневому каталогу проекта ( где обычно находится webpack.config.js)

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

Теперь, когда мы знаем, что делают эти базовые строки, давайте создадим то, что нам нужно, а именно наш файл точки входа index.js.

  • Либо вручную, либо просто с помощью мыши создайте исходную папку и index.js
mkdir src
touch src/index.js
  • Затем добавьте простой код, чтобы он мог выполнять одну задачу.
window.onload = function() {
 console.log(‘Thanks Marco Vanali!’)
};

Создайте и запустите наш первый пакет

Прохладный! Теперь давайте посмотрим, как связать наш простой файл index.js через Webpack.

Теперь давайте запустим Webpack, нацелившись на созданный нами файл конфигурации, выполнив следующую команду

 yarn webpack --config ./webpack.config.js

В результате мы увидим новую папку с именем dist, которая содержит наш bundle.js.

bundle.js будет одним файлом, содержащим весь наш сжатый javascript.

PS:
Для простоты и того, что мы хорошие ребята, давайте создадим скрипт прямо в нашем package.json; таким образом, мы просто запустим * yarn bundle *, вместо того, чтобы запоминать эту прекрасную строчку кода.

  • В package.json замените объект скрипта следующим
“scripts”: {
  “bundle”: “yarn webpack --config ./webpack.config.js”
},

Флаг «config» - это то, что позволяет нам указать имя нашего конфигурационного файла Webpack. В этом случае он нам даже не понадобится, потому что по умолчанию будет использоваться webpack.config.js. - config очень полезен, если вы хотите использовать разные файлы конфигурации для разных скриптов.

Запуск

Время близко, теперь мы хотим запустить наше репо и посмотреть результат файла index.js.

Пока у нас есть файл javascript, содержащий нашу логику, но что еще нам нужно в основном проекте веб-сайта, кроме javascript?

HTML-файл для его размещения!

  • Создайте файл Html в корневой папке и потребуйте, чтобы там наш bundle.js

По умолчанию Webpack ищет файл index.html в корневой папке, конечно, он может быть не там, где мы хотим его разместить, но мы увидим, как определить его местоположение позже, вместе со мной.

  • импортировать файл bundle.js в файл index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1> Well done learning more about Webpack </h1>
    <script type="text/javascript" src="./dist/bundle.js"></script></body>
</html>

На этом этапе мы хотим запустить наше приложение.
Мы могли бы просто открыть наш index.html, но мы могли бы получить ошибку CORS в некоторых браузерах, поэтому это не идеальный подход, но мы действительно хотим использовать возможности Webpack для настройки нашего сервера с помощью Webpack-dev-server.

Давай установим это

yarn add webpack-dev-server -D

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

Вот так:

“scripts”: {
 “start”: “yarn webpack-dev-server --config ./webpack.config.js”,
 “build”: “yarn webpack --config ./webpack.config.js”
},

Итак, запустив yarn start, мы запустим наше приложение с помощью webpack-dev-server.

Но нам еще нужно написать для него конфигурацию. И угадайте где?

Настройте сервер разработки и переместите index.html

Что, если мы хотим настроить такие параметры, как порт, на котором мы запускаем наше приложение, откуда брать контент, выполнять настраиваемое промежуточное ПО и т. Д.?

Как мы уже говорили, webpack-dev-server будет обслуживать наш bundle.js, используя файл index.html, помещенный в корень. Чтобы настроить его, нам нужно перейти в webpack.config.js и добавить в объект модуль ключ devServer и следующие основные свойства:

const path = require(‘path’);
module.exports = {
  entry: ‘./src/app.js’,
  output: {
    path: path.resolve(__dirname, ‘dist’),
    filename: ‘bundle.js’
  },
  devServer: {
    contentBase: path.join(process.cwd(), ‘dist’),
    compress: true,
    port: 8050
  }
};

port = указывает порт для запуска сервера
contentBase = укажите путь, по которому сервер разработки webpack найдет все необходимые файлы (index.html и bundle .js).

Теперь, когда мы используем webpack-dev-server и получаем больший контроль над нашим приложением, мы столкнемся с небольшой проблемой.

Если мы сейчас запустим наше репо:

 yarn start

это больше не будет работать.

Почему?

Это происходит потому, что по умолчанию webpack-dev-server будет искать наш index.html внутри папки dist и больше нигде.

Чтобы исправить это, после завершения работы над нашим HTML-файлом мы могли бы создать его копию и вставьте его вручную в папку dist.
Верно?
Очевидно, нет!

Это будет означать, что нам придется вручную копировать index.html каждый раз, когда мы вносим изменения.
(Да, но я мог бы сохранить его в dist и работать там! Это еще хуже! Вам следует не работает в вашей папке dist.)

Какой может быть вариант? Ну а какая сборка будет включать индексный HTML в папку dist, взяв его из корня?

Таким образом, все было бы автоматически, и человечество больше не было бы необходимо.

Хорошо, может быть, это многовато, но дает представление!

Плагин Html Webpack

Webpack работает в основном через плагины и загрузчики, поэтому, если вы понимаете, как их использовать, вы действительно на правильном пути:

Https://stackoverflow.com/questions/37452402/webpack-loaders-vs-plugins-whats-the-difference

Для достижения нашей цели мы можем использовать плагин под названием HtmlWebpackPlugin

  • Установите плагин

yarn add html-webpack-plugin -D
  • Добавьте плагин в наш webpack.config.js, который теперь должен выглядеть так
const path = require(‘path’);
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
  entry: ‘./src/app.js’,
  output: {
    path: path.resolve(__dirname, ‘dist’),
    filename: ‘bundle.js’
  },
  devServer: {
    contentBase: path.join(process.cwd(), ‘dist’),
    compress: true,
    port: 8050
  },
  plugins: [new HtmlWebpackPlugin({
    filename: ‘index.html’,
    template: ‘./index.html’
  })]
};

Как видите, внутри нашего модуля мы создали новый ключ под названием плагины.

Его значение представляет собой массив, где каждый элемент является подключаемым модулем. Как видите, мы инициализируем HtmlWebpackPlugin, а затем передаем в качестве аргументов наши спецификации:

  • Имя создаваемого файла, имя_файла,
  • и HTML-файл для использования в качестве шаблона для копирования.

Теперь переместите файл index.html из папки dist в корневую.
Корневой путь - это то место, где мы теперь стремимся взять его, как мы написали в ключе шаблона.

Прежде чем попробовать, добавьте некоторые текстовые изменения в файл HTML и УДАЛИТЕ скрипт, который мы использовали для импорта bundle.js.

Почему мы хотим его удалить? потому что наш плагин HTML позаботится и об этом! Собирается автоматически добавить импорт файла, указанного в ключе точки входа, в наш файл webpack.config.js.

А теперь приступим!

yarn build

Ууа! Посмотрите там! в нашей папке dist теперь есть наш файл index.html!
И он выглядит точно так же, как тот, который у нас есть в корне!

Теперь

yarn start

и перейдите по адресу http: // localhost: 8050 /
Wuala, наш пакет, помещенный в папку dist, обслуживается.

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

В конце концов, это неплохой парень, не правда ли ?! Мне это действительно нравится!

БОНУС, Кто-то сказал SCSS и Loader?

Давайте быстро сделаем последнее, чтобы укрепить наше понимание.

  • Внутри папки src создайте еще одну папку с именем style и внутри нее один файл с именем main.scss
mkdir src/styles
touch src/styles/main.scss
  • Добавьте в файл scss следующий код:
body {
 background: tomato;
 margin: 0;
 padding: 0;
}
  • Импортируйте файл SCSS в файл index.js, расположенный в папке src.

import ‘./styles/main.scss’

Прохладный! Теперь у нас есть импортированный стиль, так что все должно быть в порядке, верно?

Если вы сейчас попытаетесь создать приложение, Webpack точно скажет вам, что вам нужно.

Для работы с этим типом файлов вам может потребоваться соответствующий загрузчик.

Вам нужен загрузчик. Это потому, что по умолчанию Webpack может объединять только файлы js, и в этом случае нам нужно что-то, чтобы сначала преобразовать scss в css, а затем css в js!

sass-загрузчик

Мы будем использовать загрузчик sass-loader.

  • Как сказано в документации, давайте установим следующие пакеты
yarn add style-loader css-loader sass-loader node-sass -D
  • Добавьте загрузчик в объект module.exports вашего файла конфигурации, добавив новый ключ под названием module плюс следующую настройку.
module: {
  rules: [{
   test: /\.scss$/,
   use: [
  "style-loader", // creates style nodes from JS strings
  "css-loader", // translates CSS into CommonJS
  "sass-loader" // compiles Sass to CSS, using Node Sass by default
   ]
  }]
}

Ключ модуля в файле конфигурации - это то место, куда мы обычно добавляем загрузчики.

Прохладный! Большая часть сделана. А теперь беги снова

yarn build

Теперь, если вы зайдете в свой bundle.js и поищете слово помидор (цвет фона, который мы выбрали в файле scss), мы найдем его там!

Это хороший знак, не правда ли?

  • Теперь беги
yarn start
  • Go to
http://localhost:8050/

и наслаждайтесь томатным фоном! мы сделали это! отличная работа!

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

В Интернете есть множество ресурсов, которые помогут глубже понять Webpack и посмотреть, какие еще удивительные вещи можно с ним делать!

Вы можете найти репозиторий этого проекта здесь, в моем GitHub:
https://github.com/Vanals/medium-basic-webpack-bundle

Личные:

ПОСЛЕДОВАТЬ МНЕ

Linkedin

Твиттер

Хотите узнать обо мне больше? прочтите, как я стал разработчиком https://medium.com/@marcovanali/a-journey-from-nursing-to-web-developing-34aa44a153ae