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

Что такое объединение?

Объединение - это метод уменьшения времени загрузки и количества HTTP-запросов за счет группировки нескольких связанных файлов в один. Вы можете создать столько пакетов, сколько захотите, но меньшее количество файлов означает меньше HTTP-запросов, что, безусловно, улучшает производительность загрузки. Вы можете комбинировать файлы javascript, CSS, sass или любой другой связанный файл.

Что такое минификация?

Минификация - это метод оптимизации кода путем удаления лишних пробелов, комментариев, сокращения переменных и удаления другого ненужного кода.

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

Концепции Webpack…

Запись: точка / каталог, в котором webpack должен начать построение полного графа зависимостей. Он просматривает файлы, которые импортируются в записи, и добавляет эти файлы в граф зависимостей, иерархически просматривает файлы и соответственно добавляет их в граф зависимостей, пока не будет покрыт весь код, необходимый для запуска приложения. По умолчанию это значение ./src/index.

module.exports={
   entry:'.src/index.js'
}

Создание нескольких записей означает, что вы указываете веб-пакету создавать разные графики зависимостей для разных файлов. Это более оптимизированный метод, а не единственная точка входа.

module.exports={
   entry:{
      page1:'.src/page1.js',
      page2:'.src/page2.js'
  }
}

Вывод: место для объединения ваших файлов и способ именования этих файлов. По умолчанию для главного выходного файла t установлено значение ./dist/main.js, а для любого другого файла - ./dist.

module.exports={
   output:{
      path:path.resolve(__dirname,"build"),
      filename:'first-webpack.bundle.js'
   }
}

Имя файла сообщает имя сборщика и сообщает, куда мы хотим отправить пакет.

Загрузчики: Webpack понимает только Javascript и JSON, но загрузчики могут расширить его функциональные возможности, чтобы охватить другие типы файлов, например .css, .sass или любые другие файлы. Загрузчики преобразуют файлы в модули, чтобы их можно было добавить в граф зависимостей.

У погрузчиков есть два свойства

  1. test указывает тип файла или файлов, которые следует преобразовать.
  2. use указывает, какой загрузчик использовать для этого конкретного типа файла.
module.exports={
   module: {
      rules: [
         {
            test:/\.css$/,
            use:["style-loader","css-loader"]
         }
      ]
   }
}

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

module.exports={
   plugins:[
      new HtmlWebpackPlugin({
         template:path.resolve(__dirname,"src","index.html")
      })
   ]
}

Использование HtmlWebpackPlugin для загрузки шаблона HTML из файла src / index.html.

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

module.exports={
   mode:'production'
}

Совместимость браузера: Webpack поддерживает все браузеры, которые могут запускать JavaScript ES5 или выше. Для работы в старых браузерах вы можете использовать polyfill.

Заключение

Итак, это было небольшое введение в Webpack. Надеюсь, эта статья дала вам базовое представление о Webpack. Я также скоро сделаю блог на тему «Начало работы с webpack». Пока вы исследуете Интернет, есть много доступных ресурсов, и я буду рад, если вы узнали что-то из этой статьи.