Продолжаем обновлять...
Портал интервью:
webpack
Владеете общей конфигурацией Webpack, умеете самостоятельно создавать интерфейсную среду и оптимизировать проект;
001. Расскажите о своих мыслях о webpack:
webpack — это инструмент для упаковки модулей, который можно использовать для управления зависимостями модулей в проекте и компиляции статических файлов, необходимых выходному модулю. Он может хорошо управлять и упаковывать HTML, CSS, JavaScript и статические файлы (изображения, шрифты), используемые в разработке, чтобы сделать разработку более эффективной. Для различных типов зависимостей webpack имеет соответствующие загрузчики модулей, анализирует зависимости между модулями и, наконец, объединяет и генерирует оптимизированные статические ресурсы.
002. Основная функция и принцип работы webpack?
Транскодирование: TypeScript в JavaScript, SCSS в CSS и т. д.
Оптимизация файлов: сжатие JavaScript, CSS, HTML-кода, сжатие и объединение изображений и т. д.
Разделение кода: извлеките общий код нескольких страниц, извлеките код, который не нужно выполнять на первом экране, и дайте ему возможность загружаться асинхронно.
Объединение модулей: В модульном проекте много модулей и файлов, и необходимо создать функцию для объединения модулей в один файл.
Автообновление: отслеживание изменений локального исходного кода, автоматическая сборка, обновление браузера
Проверка кода: перед отправкой кода на склад необходимо проверить, соответствует ли код спецификации и проходит ли модульный тест.
Автоматический выпуск: после обновления кода код онлайн-релиза создается автоматически и передается в систему выпуска.
Процесс сборки 003.webpack:
Из модуля, настроенного в записи для рекурсивного разрешения всех модулей, от которых зависит запись, Каждый раз при обнаружении модуля будет найдено соответствующее правило преобразования в соответствии с настроенным загрузчиком.
После преобразования модуля анализируется модуль, от которого зависит текущий модуль. Эти модули группируются по записям, а запись и все зависимые от нее модули группируются в групповой фрагмент.
Наконец, webpack преобразует все чанки в выходной файл. На протяжении всего процесса веб-пакет будет выполнять логику, определенную в плагине, в нужное время.
004. Принцип упаковки Webpack:
Упакуйте все зависимости в файл bundle.js, который загружается по требованию путем разделения кода на фрагменты модулей.
005. Что такое вход, выход?
входная запись, которая сообщает webpack, какой модуль использовать в качестве отправной точки для сборки проекта, по умолчанию ./src/index.js
output export, сообщает webpack, куда выводить упакованный код и как его назвать, по умолчанию ./dist
006. Что такое загрузчик, плагины?
Загрузчик используется, чтобы сообщить веб-пакету, как преобразовать файл определенного типа и добавить его в упакованный файл.
плагины (плагины) более эффективны, могут оптимизировать пакеты, управлять ресурсами и внедрять переменные среды
007. Что такое пучок, чанк, модуль?
Bundle — это файл, упакованный веб-пакетом, а чанк — это блок кода, разделенный на код, когда веб-пакет выполняет анализ зависимостей модулей. модуль - это отдельный модуль в разработке
008. На что следует обратить внимание при упаковке 008.npm? Как использовать webpack для лучшей сборки?
Полная основная информация;
определить зависимости;
игнорировать файлы;
маркировка;
009. Каковы общие загрузчики? Какую проблему они решают?
загрузчик файлов: вывод файла в папку и обращение к выходному файлу через относительный URL-адрес в коде;
url-loader: аналогичен файловому загрузчику, но может вставлять содержимое файла в код в режиме base64, когда файл небольшой;
source-map-loader: загружает дополнительные файлы исходной карты для облегчения отладки точки останова;
загрузчик изображений: загружать и сжимать файлы изображений;
babel-loader: конвертировать ES6 в ES5;
css-loader: загружает CSS, поддерживает модульность, сжатие, импорт файлов и другие функции;
загрузчик стилей: вставка кода CSS в JavaScript и загрузка CSS через манипуляции с DOM;
eslint-loader: проверять код JavaScript через ESLint;
010. Спецификация веб-пакета:
webpack следует спецификации commonjs по умолчанию module.exports
Есть два режима при связке с webpack:
Режим разработки: в основном используется для тестирования, отладки кода и т. д.;
Производственный режим: для решения проблем с производительностью сжать. Если нет плагина, он не будет сжат;
По умолчанию файл конфигурации веб-пакета называется webpack.config.js, вы можете указать имя файла конфигурации веб-пакета через --config
011. Процесс настройки:
Может попробовать настроить скаффолд?
012.loader:
Для обработки CSS требуется два загрузчика: css-loader style-loader
postcss-loader Предоставляет способ обработки CSS с кодом JavaScript. Он отвечает за преобразование кода CSS в структуру абстрактного синтаксического дерева (Abstract Syntax Tree, AST), которая затем передается плагину для обработки.
-webkit-transform: rotate(45deg); transform: rotate(45deg);
mini-css-extract-plugin, используемый для введения внутренних стилей, упаковки css в файл css и добавления css в файл index.html.
Оптимизировать-css-активы-webpack-плагин сжатия css
terser-webpack-plugin css сжатие js нельзя сжимать, а еще есть плагин, который умеет сжимать js
загрузчик файлов должен позволить изображениям пакета webpack
url-loader может преобразовывать изображения в base64 или разрешать упаковывать изображения через webpack
webpack по умолчанию не поддерживает расширенный синтаксис js, поэтому вам нужно использовать babel;
преобразование babel; npm i @babel/core @babel/preset-env babel-loader --save-dev
013.plugins:
html-webpack-plugin создает html-файл на основе модуля. В это время новый индексный файл не будет создан в папке dist.
Мне нужно создать новый индексный файл в открытом доступе
В соответствии с этим файлом шаблона в памяти создается index.html, а затем автоматически импортируется bundle.js.
clean-webpack-plugin удаляет неиспользуемые модули
014. Разница между загрузчиком и плагином?
- Загрузчик должен дать веб-пакету возможность загружать и анализировать файлы, отличные от js.
- Плагин может расширить функциональность webpack, делая webpack более гибким. Вы можете изменить результат вывода через API веб-пакета во время процесса сборки.