Начало работы с Webpack [с примером проекта]

Webpack это модуль связывания Это облегчает создание сложных приложений JavaScript. Он приобрел серьезную популярность с тех пор, как сообщество React выбрало его в качестве основного инструмента сборки. Веб-пакет ни менеджер пакетов, ни исполнитель задач поскольку он использует другой (более продвинутый) подход, но его цель также заключается в настроить динамический процесс сборки.

Webpack работает с ванильным JavaScript. Вы можете использовать его для связать статические активы приложения, такие как изображения, шрифты, таблицы стилей, скрипты в одном файле, а заботиться обо всех зависимостях.

Вам не понадобится Webpack для создания простого приложения или веб-сайта, например, такого, который имеет только один JavaScript и один CSS-файл и несколько изображений, однако это может быть спасением для более сложное приложение с несколькими активами и зависимостями.

Webpack против тех, кто выполняет задачи, против Browserify

Итак, как складывается Webpack по сравнению с другими инструментами сборки такие как Grunt, Gulp или Browserify?

Грант и Гулп являются бегунами задач. В их конфигурационном файле вы указать задачи, и исполнитель задач выполняет их. рабочий процесс бегуна задач в основном выглядит так:

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

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

Если вы хотите узнать больше о Как Webpack сравнивается с другими инструментами сборки, Я рекомендую вам две статьи:

1. Эндрю Рэй Webpack: когда использовать и почему в своем блоге
2. Кори Хаус Browserify против Webpack на freeCodeCamp (с отличными иллюстрациями)

Две иллюстрации выше взяты из Webpack материалы справочника Pro React, другой ресурс, который стоит посмотреть.

Четыре основных понятия Webpack

Веб-пакет имеет четыре основных варианта конфигурации “основные понятия” что вам нужно будет определить в процессе разработки:

1. запись - отправная точка графа зависимостей (один или несколько файлов JavaScript).
2. Выход - файл, в котором вы хотите вывод для связывания с (один файл JavaScript).
3. Погрузчики - преобразования на активы, которые превратить их в модули Webpack чтобы они могли быть добавлен в граф зависимостей. Например, CSS-погрузчик используется для импорта файлов CSS.
4. Плагины - пользовательские действия и функции выполняется на связке. Например, i18n-WebPack-плагин встраивает локализацию в комплект.

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

Установить веб-пакет

к установить веб-пакет, откройте командную строку, перейдите в папку вашего проекта и выполните следующую команду:

 npm init 

Если вы не хотите выполнять настройку самостоятельно, вы можете сделать npm заселить package.json файл со значениями по умолчанию с помощью следующей команды:

 npm init -y 

Далее установите Webpack:

 npm установить веб-пакет --save-dev 

Если вы использовали значения по умолчанию, это то, как ваш package.json Файл должен выглядеть следующим образом (свойства могут быть в другом порядке):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " test ":" echo \ "Ошибка: тест не указан \" && exit 1 "," ключевые слова ": []," author ":" "," license ":" ISC " 

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

Вам нужно создать webpack.config.js файл в корневой папке проекта. Этот конфигурационный файл играет центральную роль, так как именно здесь вы будете определить четыре основных понятия (точки входа, выход, загрузчики, плагины).

webpack.config.js файл содержит объект конфигурации какие свойства вам нужно указать. В этой статье мы укажем четыре свойства, которые соответствуют четырем основным понятиям (запись, выход, модуль, а также плагин), но объект config имеет и другие свойства.

1. Создайте точки входа

Вы можете иметь одна или несколько точек входа. Вы должны определить их в запись имущество.

Вставьте следующий фрагмент кода в webpack.config.js файл. Это указывает одну точку входа:

 module.exports = entry: "./src/script.js"; 

Чтобы указать более одной точки входа, вы можете использовать либо массив или синтаксис объекта.

В папке вашего проекта, создать новый ЦСИ папка и script.js файл внутри него. Это будет ваш точка входа. Для тестирования просто поместите строку внутри него. Я использовал следующий (однако, вы также можете использовать более интересный):

 const приветствие = "Привет. Я стартовый проект Webpack."; document.write (приветствие); 

2. Определите выход

Вы можете иметь только один выходной файл. Webpack объединяет все ресурсы в этот файл. Вам необходимо настроить выход Свойство следующим образом:

 const path = require ("путь"); module.exports = entry: "./src/script.js", вывод: имя файла: "bundle.js", путь: path.resolve (__ dirname, 'dist'); 

имя файла свойство определяет имя связанного файла, в то время как дорожка имущество указывает название каталога. Пример выше создаст /dist/bundle.js файл.

Хотя это не обязательно, лучше использовать path.resolve () метод когда вы определяете дорожка собственность, как это обеспечивает точное разрешение модуля (абсолютный путь вывода создается по разным правилам в разных средах, разрешение модулей устраняет это несоответствие). Если вы используете path.resolve, вам нужно требовать дорожка Узловой модуль на вершине webpack.config.js файл.

3. Добавьте загрузчики

к добавить загрузчики, вам нужно определить модуль имущество. Ниже мы добавим столпотворение-погрузчик это позволяет вам безопасно использовать функции ECMAScript 6 в ваших файлах JS:

 const path = require ("путь"); module.exports = entry: "./src/script.js", вывод: имя_файла: "bundle.js", путь: path.resolve (__dirname, 'dist'), модуль: rules: [test : /\.js$/, исключить: / (node_modules | bower_components) /, использовать: loader: "babel-loader", параметры: presets: ["env"]]; 

Конфиг может показаться сложным, но он просто скопирован из Вавилонская погрузочная документация. Большинство загрузчиков поставляются либо с файлом readme, либо с какой-либо документацией, поэтому вы можете (почти) всегда знать, как их правильно настроить. И у документов Webpack также есть страница, которая объясняет как настроить module.rules.

Можете добавить столько погрузчиков, сколько вам нужно, вот полный список Обратите внимание, что вам также нужно установить каждый загрузчик с npm заставить их работать. Для загрузчика Babel необходимо установить необходимые пакеты Node с помощью npm:

 npm install --save-dev babel-загрузчик babel-core babel-preset-env webpack 

Если вы посмотрите на свой package.json файл, вы увидите, что npm добавили три связанных с Babel пакета в devDependencies имущество, они позаботятся о компиляции ES6.

4. Добавьте плагины

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

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

Требовать плагины в качестве узловых модулей, создать две новые константы: HtmlWebpackPlugin а также PreloadWebpackPlugin а также использовать требуют () функция.

 const path = require ("путь"); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", вывод: имя_файла: "bundle.js", путь: path.resolve (__dirname, 'dist'), модуль: rules: [test : /\.js$/, исключить: / (node_modules | bower_components) /, использовать: loader: "babel-loader", параметры: presets: ["env"]], плагины: [new HtmlWebpackPlugin (), новый PreloadWebpackPlugin ()]; 

Как и в случае с погрузчиками, вы также должны установите плагины Webpack с помощью npm. Чтобы установить два плагина в этом примере, выполните следующие две команды в командной строке:

 Установка npm html-webpack-plugin --save-dev Установка npm --save-dev preload-webpack-plugin 

Если вы проверите package.json файл сейчас, вы увидите, что npm добавил два плагина к devDependencies имущество.

Запустить Webpack

к создать дерево зависимостей а также вывести пакет, выполните следующую команду в командной строке:

 WebPack 

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

Если все прошло правильно, Webpack создал расстояние папка в корне вашего проекта и поместил два связанных файла (bundle.js а также index.html) внутри него.

Github репо

Если вы хотите проверить, загрузить или раскошелиться на весь проект, взгляните на репозиторий Github..