Webpack может показаться ошеломляющим, и вы, возможно, избегали изучения этого при создании приложений React. Но его довольно просто настроить и создать самостоятельно для ваших приложений React. Это будет руководство для начинающих по Webpack и тому, что он на самом деле делает.
Что такое Webpack, как он работает и что делает?
Если вы знакомы с Create React App, Webpack отвечает за основную функциональность в Create React App, наряду с некоторыми другими вещами, такими как Babel (компилятор JS). Create React App использует Webpack для объединения ваших файлов, и именно поэтому разработка приложений React с помощью create React app действительно проста.
Webpack — это сборщик модулей. Но что это значит? Это означает, что Webpack компилирует файлы JS в один основной файл или столько файлов, в которые вы хотите связать свой код, но обычно это один файл пакета.
Webpack поставляется со многими функциями, такими как объединение модулей, минимизация файлов (процесс минимизации кода путем избавления от пробелов, комментариев, ненужного кода и минимизации/сокращения кода), компиляция SASS и т. д. Он объединяет и соответствует вашим разработкам. приложение во что-то, что браузер может понять.
Webpack управляет зависимостями и загружает код, который необходимо загрузить первым. Webpack отслеживает, какие файлы от чего зависят, и соответственно загружает их.
Проблема, которую решает Webpack, заключается в том, что при разработке больших приложений ваши зависимости могут накапливаться и пересекаться с различными файлами, что делает их сложными и трудными в управлении. Webpack управляет всеми этими зависимостями и файлами за вас, связывая их с простым JS, понятным браузеру.
Как настроить веб-пакет
Если вы хотите добавить загрузчик и плагины в свой пакет Webpack, вы должны сделать это в файле конфигурации Webpack.
Вот как выглядит файл конфигурации веб-пакета.
//Webpack.config.js file:
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
}
};
Давайте распакуем то, что происходит в этом файле.
Во-первых, мы устанавливаем значение mode, developmentи это говорит Webpack не минимизировать наш код, что чрезвычайно полезно при разработке.
Затем мы должны убедиться, что все, что у нас есть в этом файле, экспортируется как модуль, если мы хотим его использовать.
В вашем package.jsonфайле, созданном при инициализации вашего приложения npm init, вы можете указать Webpack для запуска scriptsследующим образом:
"scripts": {
"start": "webpack --config webpack.config.js"
},
//The webpack config file can be named anything,
//In this case, it is webpack.config.js
Следующее entryсвойство принимает src, где работает все ваше приложение. По умолчанию Webpack будет искать index.jsфайл в srcпапке, но здесь вы можете указать файл, в котором запускается ваше приложение, и какой код необходимо связать.
Свойство output— это объект, в который вы хотите вывести свой код. Свойство filenameможет называться как угодно, обычно это main.js.
Свойство pathуказывает, куда вы хотите направить код. В данном случае мы разрешаем абсолютный путь к distкаталогу, вы можете назвать эту папку как угодно. По сути, это папка, в которой Webpack соберет ваше приложение, традиционно это папка dist.
Это основы для настройки вашего файла Webpack и того, как заставить Webpack запускать ваше приложение. Конечно, вы можете добавить в этот файл конфигурации больше, например, загрузчики и плагины. Вы можете обратиться к документации Webpack , если вам это интересно.
Очистка кеша в Webpack
Очистка кеша поначалу может показаться запутанной темой, но она может быть важна для функциональности вашего приложения и может быть легко выполнена в Webpack.
Когда вы связываете свое приложение с Webpack, Webpack связывает все в развертываемом /distкаталоге.
Как только ваше приложение развернуто на сервере, и пользователь посещает ваше приложение, клиент (обычно браузер) должен снова связаться с сервером, чтобы получить все активы приложения.
Вот почему браузеры кэшируют активы приложений. По сути, они сохраняют файлы или модули из /distкаталога, так что в следующий раз, когда пользователь обновляет или посещает браузер, ему не нужно извлекать какие-либо активы, которые он уже помнит.
Как запретить браузерам кэшировать пакеты для CSS или файлов, в которые мы внесли изменения?
Файлы кэширования браузера могут вызвать проблему, потому что, если мы изменим файлы, которые были кэшированы, браузер может не обновить их и предположить, что файл тот же, только потому, что имя файла не изменилось.
Идея очистки кеша заключается в том, что мы хотим создавать новое имя файла каждый раз, когда вы вносите изменения в файл, и сохранять имя файла прежним, если вы не вносили изменений. Таким образом, когда вы вносите изменения в файл, когда клиент делает запросы к серверу для получения активов приложения, файлы, которые вы изменили, будут обновляться, поскольку браузер не распознает имена файлов.
К счастью, Webpack поставляется со встроенной функцией замены output.filenameв конфигурационном файле Webpack, которая называется[contenthash].
Замена [contenthash]создаст уникальный хеш на основе того, изменилось ли содержимое актива или нет, обновляя его только тогда, когда это происходит.
Когда вы добавите [contenthash]объект вывода в свой файл конфигурации, он будет выглядеть примерно так:
//the output object in module.exports from the webpack.config.js file:
output: {
filename: "main.[contentHash].js",
path: path.resolve(__dirname, "dist")
},
Итак, я надеюсь, что это введение в Webpack было легко усвоить и дало ответы на несколько вопросов, которые у вас могли возникнуть о Webpack. Webpack выполняет большую часть работы за кулисами, чтобы заставить ваши приложения React работать, все, что вам нужно сделать, это убедиться, что вы правильно настроили его для своего приложения. В следующий раз, когда вы будете работать над приложением React, подумайте о настройке Webpack самостоятельно!