За последние пару месяцев мы увидели разные способы создания приложений angular 2. Первоначально, во времена ng 1.x, от gulp до systemjs и ng2 с широко обсуждаемым angular-cli и webpack, мы все пробовали, плакали и довольствовались нашим любимым сборщиком модулей.

Я не собираюсь возвращаться к тому же старому обсуждению того, как наше веб-сообщество превратилось в модульное и насколько мы все используем ES2015, amd, commonjs, бла-бла-бла. Мы все поняли и осознали важность создания хорошо модульных интерфейсов и приложений.

Итак, перейдем к делу: Webpack.

Что такое Webpack

Webpack - это мощный сборщик модулей, который принимает модули с зависимостями в качестве входных и выходных статических ресурсов, представляющих эти модули. Он ищет оператор импорта в исходном коде приложения, создает граф зависимостей и генерирует пакет, который является файлом JavaScript, но ресурсы могут включать JavaScript, стили CSS, HTML и т. Д. Но причина того, что он должен быть сверхэффективным, заключается в это функция Разделение кода, которая позволяет разделить код вашего приложения и загрузить только то, что требуется. Короче говоря, загружайте части приложения по запросу.

Процесс сборки

Он отлично работает с npm, а начать работу с веб-пакетом просто и быстро.

Шаги сборки:

git clone https://github.com/richavyas/angular2-webpack.git

cd angular2-webpack

npm install

npm start

Перейдите по адресу http: // localhost: 8080 /

Этот репозиторий git содержит базовую настройку для начала работы с приложением webpack build ng2. При установке следует обратить внимание на следующие файлы:

  1. package.json - помогает с установкой npm для webpack и rc6.
  2. webpack.config.js - содержит конфигурацию для Webpack для создания модулей.

Как работает пакетирование модулей Webpack ??

Создавать бандлы можно разными способами:

  • Один гигантский пакет
  • Отдельные пакеты

Объединение в репозиторий github осуществляется путем разделения конфигурационного файла dev / prod и последующего включения его в webpack.config.file вместо определения в нем зависимостей. Но этот выбор полностью зависит от разработчика. Этот webpack.dev.js содержит все определения для выходных данных, плагинов и т. Д. И включает webpack.common.js для включения model.exports объект. Эта структура вдохновлена ​​https://angular.io/

В файлах webpack.common.js и config следует выделить следующие моменты:

  1. Запись - ›Вывод: Webpack получает зависимости от файлов, упомянутых в блоке entry. Он включает весь импорт в свой список зависимостей. Затем весь этот список зависимостей объединяется в выходной файл с помощью output: {}. Как упоминалось выше, он может состоять из одного или нескольких пакетов. В случае нескольких пакетов несколько записей будут представлять разные файлы и их соответствующие списки зависимостей, а также будут генерировать соответствующие пакеты.
  2. Загрузчики: загрузчики сообщают веб-пакету, как обрабатывать файлы, не относящиеся к javascript, такие как Typescript, с использованием файла tsconfig.json, CSS или HTML или даже изображений, если на то пошло.
  3. Разрешить: здесь есть расширения, определенные для массива расширений файлов, которые следует использовать для разрешения модулей.
  4. Плагины: плагины могут вводить пользовательские шаги сборки. Веб-пакеты предоставляют огромный список плагинов для извлечения текста, удаления кода поставщика из приложения, вставки html-css в виде скриптов, uglification и т. Д.

Весь код этого репо проверен здесь. Спасибо за чтение. Пожалуйста, нажмите ❤️, если вы нашли эту публикацию достойной рекомендации.