Нет ничего более убедительного, чем время, потому что время может изменить все, не сообщая нам об этом.

Недавно я использовал nuxt в своей работе только для того, чтобы обнаружить, что если webpack узнает 6, nuxt в принципе не нужно изучать, и нет никаких затрат на обучение, поэтому в этой статье повторно записаны некоторые базовые знания webpack4,В следующей статье мы настроим реагирующие леса, оптимизированные до предела., я также надеюсь, что все могут продолжать обращать внимание Настройка веб-пакета заключается в оптимизации и еще раз оптимизации, ха-ха~

уже опубликовано30 шагов webpack4 для создания полностью оптимизированной среды разработки React, как и было обещано,кликните сюда

Вино крепкое и трусливое, и то, как я это узнаю, в основном делится на 3 этапа:

Прежде всего, прочитайте эти необходимые конфигурации, а также некоторые загрузчики, некоторые плагины и прочитайте их молча, как китайский текст (этот шаг самый важный)
практика, метод проб и ошибок
понять, как

Хорошо, давайте начнем

предисловие

Webpack можно рассматривать как сборщик модулей: он анализирует структуру вашего проекта, находит модули JavaScript и другие языки расширения (Scss, TypeScript и т. д.), которые браузеры не могут запускать напрямую, и упаковывает их в подходящий формат для браузера. использовать.

Каковы особенности WebPack по сравнению с Grunt и Gulp?

На самом деле между Webpack и двумя другими нет большого сходства Gulp/Grunt — это инструмент, который может оптимизировать процесс разработки интерфейса, а WebPack — это модульное решение, но преимущества Webpack делают Webpack во многих сценариях. Gulp/Grunt-подобные инструменты.

Entry: Entry, первый шаг в выполнении сборки Webpack начнется с Entry, который можно абстрагировать во входные данные.
Модуль: модуль, все является модулем в Webpack, а модуль соответствует файлу. Webpack будет рекурсивно находить все зависимые модули, начиная с настроенного Entry.
Чанк: блок кода, фрагмент состоит из нескольких модулей для слияния и разделения кода.
Загрузчик: преобразователь модулей, который используется для преобразования исходного содержимого модуля в новое содержимое по мере необходимости.
Плагин: плагин расширения, который внедряет логику расширения в определенное время в процессе сборки Webpack, чтобы изменить результат сборки или сделать то, что вы хотите.
Вывод: выведите результат после того, как Webpack пройдет серию обработок и получит окончательный желаемый код.

1. Настройте структуру с 0

Инициализировать структуру проекта

2. Настройте webpack.config.js

Создайте новый файл webpack.config.js в корневом каталоге проекта.

3. Настройте сервер разработки

4. Пакет js

5. Поддержите ES6, реагируйте, vue

6. Обработка префиксов свойств css, sass и css3

обрабатывать css

Динамическая разгрузка и загрузка`CSS`

style-loader предоставляет методы use() и unuse() для объектов css, которые можно использовать для загрузки и выгрузки css.

Например, чтобы реализовать требование щелчка для переключения цветов, измените index.js

справиться с дерзостью

Извлечь файлы css как отдельные файлы

7. Вывод html

8. Обрабатывайте сторонние библиотеки, на которые ссылаются, и предоставляйте доступ к глобальным переменным

Параметр webpack.ProvidePlugin представляет собой пару ключ-значение, ключ — это имя переменной, используемой в нашем проекте, а значение — это библиотека, на которую указывает ключ.