За последние пару месяцев мы увидели разные способы создания приложений angular 2. Первоначально, во времена ng 1.x, от gulp до systemjs и ng2 с широко обсуждаемым angular-cli и webpack, мы все пробовали, плакали и довольствовались нашим любимым сборщиком модулей.
Я не собираюсь возвращаться к тому же старому обсуждению того, как наше веб-сообщество превратилось в модульное и насколько мы все используем ES2015, amd, commonjs, бла-бла-бла. Мы все поняли и осознали важность создания хорошо модульных интерфейсов и приложений.
Итак, перейдем к делу: Webpack.
Что такое Webpack
Webpack - это мощный сборщик модулей, который принимает модули с зависимостями в качестве входных и выходных статических ресурсов, представляющих эти модули. Он ищет оператор импорта в исходном коде приложения, создает граф зависимостей и генерирует пакет, который является файлом JavaScript, но ресурсы могут включать JavaScript, стили CSS, HTML и т. Д. Но причина того, что он должен быть сверхэффективным, заключается в это функция Разделение кода, которая позволяет разделить код вашего приложения и загрузить только то, что требуется. Короче говоря, загружайте части приложения по запросу.
Процесс сборки
Он отлично работает с npm, а начать работу с веб-пакетом просто и быстро.
Шаги сборки:
cd angular2-webpack
npm install
npm start
Перейдите по адресу http: // localhost: 8080 /
Этот репозиторий git содержит базовую настройку для начала работы с приложением webpack build ng2. При установке следует обратить внимание на следующие файлы:
- package.json - помогает с установкой npm для webpack и rc6.
- 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 следует выделить следующие моменты:
- Запись - ›Вывод: Webpack получает зависимости от файлов, упомянутых в блоке entry. Он включает весь импорт в свой список зависимостей. Затем весь этот список зависимостей объединяется в выходной файл с помощью output: {}. Как упоминалось выше, он может состоять из одного или нескольких пакетов. В случае нескольких пакетов несколько записей будут представлять разные файлы и их соответствующие списки зависимостей, а также будут генерировать соответствующие пакеты.
- Загрузчики: загрузчики сообщают веб-пакету, как обрабатывать файлы, не относящиеся к javascript, такие как Typescript, с использованием файла tsconfig.json, CSS или HTML или даже изображений, если на то пошло.
- Разрешить: здесь есть расширения, определенные для массива расширений файлов, которые следует использовать для разрешения модулей.
- Плагины: плагины могут вводить пользовательские шаги сборки. Веб-пакеты предоставляют огромный список плагинов для извлечения текста, удаления кода поставщика из приложения, вставки html-css в виде скриптов, uglification и т. Д.
Весь код этого репо проверен здесь. Спасибо за чтение. Пожалуйста, нажмите ❤️, если вы нашли эту публикацию достойной рекомендации.