vansosnin / webpack-dll-example

🔧 Пример конфигурации webpack.DllPlugin и webpack.DllReferencePlugin

Webpack DllPlugin

Пример конфигурации webpack.DllPlugin для статьи на habrahabr.

Запуск

Чтобы локально запустить пример, выполните шаги:

• Установите зависимости

  npm install
  

• Соберите development-версию:

  npm run build:dll
  npm run build
  

  ​

• Или соберите production-версию:

  npm run deploy
  

Обратите внимание, что в данном случае не нужно собирать dll, потому что он уже собран и лежит в репозитории.

Что именно делает каждый из скриптов, можно посмотреть в package.json в разделе scripts.

• Откройте index.html

Описание

На что нужно обратить внимание (кроме конфигов):

• папка src — исходники, очевидно, они должны лежать в вашем репозитории;
• папка dist/dll/production — это как раз предсобранный dll, который нужно положить в репозиторий. При деплое на production его пересобирать не нужно;
• папка example_dist — просто пример получившихся бандлов (их таскать в вашем репозитории не нужно).

[Optional] Копирование dll

В данном примере конфигурации DllPlugin, dll собираются отдельно для каждоый среды. Например потому, что в режиме разработке мы хотим видеть ошибки React, которые не показываются в production-версии. Ну и могут быть другие причины, в зависимости от стека — это не столь важно.

Важно то, что у вас dll может лежать совершенно в другом месте, нежели ваши бандлы. Эту проблему можно решать несколькими способами. Я вижу 2:

1. использовать HtmlWebpackPlugin: он сам добавляет в html нужные теги script;
2. использовать CopyWebpackPlugin: он умеет копировать файлики.

Я выбрал второй вариант и пример его настройки можно увидеть в основном конфиге. Таким образом я копирую dll для текущей среды в папку с бандлами и без труда могу сгенерировать нужную ссылку на dll в html.

В данном примере в index.html ссылки написаны жестко, это сделано для простоты. На деле же их можно генерировать при рендеринге вьюшки.