Как удалить webpack глобально с компьютера

Обновлено: 07.07.2024

Используйте webpack или gulp, чтобы удалить лишний CSS

Как я упоминал в предыдущей статье, избыточный CSS в проекте обычно делится на две ситуации:

Слишком много повторяющихся CSS-кодов;
Написание кода CSS не имеет никакого эффекта;

Далее, для второго случая, давайте посмотрим на решения для обработки в двух случаях использования webpack и gulp.

Полное решение Webpack:

упаковка / разделение файла less / sass
Автоматически обрабатывать префикс CSS
Устранить неиспользованные CSS
Полный файл webpack.config.js

Один, меньше упаковки и разделения файлов

1. Чтобы использовать less, сначала используйте npm, чтобы установить сервис less, вам также нужно установить Less-loader для упаковки.

2. Настроить в модуле

Настроены два файловых модуля webpack.dev.conf.js (среда разработки) и webpack.prod.conf (производственная среда) в соответствующих папках сборки.

файл webpack.prod.conf.js

файл webpack.dev.conf.js

Упорядочить документы

3. Напишите div в html и создайте меньший файл в css

HTML

LESS

4. Введен в index.js

5. Для упаковки используйте webpack, введите npm run server, чтобы увидеть эффект

6. Меньше разделения

Затем упакуйте его в веб-пакет, и тогда эффект lessBox отобразится нормально. Стиль стиля, который следовал по ссылке, исчез. Мы посмотрели на index.css и выяснили, что меньший стиль вошел в index.css.

Во-вторых, упаковка и разделение файлов sass

1. Установка: поскольку sass-загрузчик зависит от node-sass, вам нужно сначала установить node-sass

Другие в основном такие же, как метод less, просто поменяйте оригинал на sass.

Три, автоматически обрабатывать префикс CSS

Для совместимости с браузером иногда необходимо добавить префиксы -webkit, -ms, -o, -moz. Цель состоит в том, чтобы страницы, которые мы пишем, работали в любом браузере.

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

Тем не менее, в веб-пакете автоматически встроен автоматический префикс

Это простая конфигурация postCSS, представляющая плагин autoprefixer. PostCSS имеет возможность добавить префикс, он увеличит соответствующий префикс атрибута css3 в зависимости от того, могу ли я использовать.

4. Введите веб-пакет для упаковки, конечный эффект. Префикс браузера добавляется в файл CSS

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

4. Устранить неиспользуемый CSS

Использование PurifyCSS может значительно снизить избыточность CSS

2. Введите glob, потому что нам нужно синхронно проверять html-шаблон, поэтому нам нужно ввести объект glob-узла для использования.
Добавьте glob и purycss-webpack в заголовок файла webpack.config.js

4. После настройки мы можем преднамеренно записать неиспользуемый контент в файл css, а после упаковки в веб-пакет этот дополнительный контент будет автоматически удален.

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

В-пятых, полный файл конфигурации webpack.config.js

Полное решение Gulp:

1. Описание: gulp-uncss - это плагин для gulp. gulp основан на nodejs, конечно, необходимо установить nodejs;

2. Установка: Откройте официальный сайт nodejs, нажмите огромную зеленую кнопку «Загрузить», и она выберет соответствующую версию (MSI-файл) в соответствии с системной информацией. Затем установите его так же, как и установку QQ (путь установки произвольный).

3. Установите gulp: установите gulp глобально, выполните npm install gulp -g, проверьте, успешно ли установлена gulp, выполните gulp -v, чтобы отобразить номер версии, то есть установка прошла успешно,

4. Создайте новый проект Gulp. (Если вы не понимаете, вы можете прочитать другую статью, нажмите, чтобы посмотреть)

5. Следующим шагом является установка плагина gulp-uncss: войдите в корневой каталог проекта и выполните

Заранее заявите, что моя система MacOS.
Хорошо, начнем. Предположим, что мы хотим установить веб-пакет, тогда наш процесс установки примерно такой: подготовка среды на уровне системы, подготовка среды на уровне программного обеспечения, установка инструмента, то есть сначала установите node.js, npm, webpack-cli, наконец установите веб-пакет, установите веб-пакет -cli и webpack, обратите внимание сначала на глобальную установку, а затем на локальную установку.
Итак, наш порядок удаления: удалить локальный веб-пакет, глобально удалить веб-пакет, локально удалить webpack-cli, глобально удалить webpack-cli и удалить npm. Если вы столкнулись с проблемой и сообщили об ошибке на полпути, вы можете решить ее, где бы вы ни столкнулись.

Удалить веб-пакет локально

При локальной установке веб-пакета вы уже установили веб-пакет в локальный каталог проекта (каталог с файлом package.json в каталоге), поэтому операция удаления также должна находиться в этом каталоге проекта.
Откройте терминал, перейдите в каталог своего проекта и выполните команду:

Если после выполнения команды ошибки (пламенной ошибки) нет, удаление, как правило, проходит успешно. Затем перейдите в файл package.json в каталоге вашего проекта и посмотрите ссылку на webpack. Это ушло

Если удаление прошло успешно, элементы с красными прямоугольниками на рисунке выше исчезнут.

Удалить веб-пакет глобально

Введите cd в командной строке, чтобы выйти из каталога проекта, и мы начинаем глобально удалять webpack.
Введите команду:

Результат:

В это время введите в терминале:

Вам будет предложено без этой команды. На данный момент, удаление веб-пакета успешно.

Удалите webpack-cli локально

Процедура локального удаления аналогична. Перейдите в локальный каталог проекта и выполните команду:

После выполнения команды появится предупреждение, но это не повлияет на результат команды.

Еще раз проверьте файл package.json. Теперь ссылка на webpack-cli должна быть удалена.

Удалите webpack-cli глобально

cd Выйдите из каталога проекта и выполните команду:

Результатом выполнения команды будет предупреждение, которое можно игнорировать
Извините, я забыл сделать снимок экрана в этом месте. , ,

Ошибка, с которой я столкнулся

Когда я выполняю команду удаления, весь мозг импульсивен и логически неупорядочен. Первый - глобальное удаление webpack-cli. Эта операция очень успешна, а затем, когда я удаляю локальный webpack-cli, возникает ошибка:

Ошибка , вероятно, связана с тем, что файл события chrome-trace-event не может быть найден, но я нашел этот файл в соответствии с путем подсказки, поэтому я попытался установить файл несколько раз в проекте и установил его глобально. Много раз это не решало проблему. В конце концов я так обрадовался, что удалил этот файл и переустановил его, что решило проблему.
Суть в том, чтобы проверить друзей, после удаления любых файлов (особенно проектов компании) в каталоге проектов, пожалуйста, не забывайте следить и отправлять напрямую, что будет мешать другим. Что касается последующей операции, вы можете создать удаленные файлы для резервного копирования, или же просто и грубо, как я, вынудив выравнивание с сервером.

Вышеуказанные webpack и webpack-cli удалены. Наконец, настала очередь npm для удаления. Выполните команду:

После выполнения команды она также вернет номер версии npm, что доказывает, что наш npm не был успешно удален.

Другой способ удалить npm:
Сначала перейдите в каталог установки npm / usr / local / lib / node_modules / npm, а затем выполните следующую команду:

Результат:

Давайте сначала разберемся, зачем нужен вебпак (webpack), и какие проблемы он пытается решить, а потом научимся работать с ним. Webpack позволяет избавиться от bower и gulp/grunt в приложении, и заменить их одним инструментом. Вместо bower'а для установки и управления клиентскими зависимостями, можно использовать стандартный Node Package Manager (npm) для установки и управления всеми фронтэнд-зависимостями. Вебпак также может выполнять большинство задач grunt/gulp'а.

Bower это пакетный менеджер для клиентской части. Его можно использовать для поиска, установки, удаления компонентов на JavaScript, HTML и CSS. GruntJS это JavaScript-утилита командной строки, помогающая разработчикам автоматизировать повторяющиеся задачи. Можно считать его JavaScript-альтернативой Make или Ant. Он занимается задачами вроде минификации, компиляции, юнит-тестирования, линтинга и пр.

Допустим, мы пишем простую страницу профиля пользователя в веб-приложении. Там используется jQuery и библиотеки underscore. Один из способов — включить оба файла в HTML:

Это простой HTML с Бутстрапом. Мы подключили jQuery и underscore с помощью тега script.

Давайте рассмотрим файл profile.js , который использует подключенные нами библиотеки. Наш код лежит внутри анонимного замыкания, которое хранит бизнес-логику приложения. Если не замыкать код в функцию, то переменные будут находиться в глобальном окружении, и это плохо.

Код будет исполнен при вызове скрипта. Если открыть страницу в браузере, то профиль будет выглядеть так.

У этого кода две задачи:

получить информацию о пользователе
настроить таймлайн.

Известно, что смешивать понятия — плохая практика, так что нужно написать отдельные модули, отвечающие за определенные задачи. В файле profile.js мы использовали анонимное замыкание для хранения всего кода. В JavaScript есть способы делать модули получше. Два популярных способа это CommonJS и AMD.

Модуль CommonJS это грубо говоря кусок повторно используемого кода, который экспортирует определенные объекты, и они становятся доступными другим модулям с помощью require .
Asynchronous Module Definition (AMD) позволяет загружать модули асинхронно.

Если хотите узнать о модулях в JavaScript больше, то советую прочитать статью JavaScript Modules: A Beginner’s Guide.

А в этой статье мы будем писать модули на CommonJS. Давайте напишем модуль timeline с методами для установки хедера и таймлайна. В CommonJS можно импортировать зависимости с помощью функции require . Таймлайн зависит от jquery и underscore .

Этот код создает новый модуль timeline . Есть две функции: setHeader и setTimeline . Мы используем специальный объект module и добавляем ссылку на нее в module.exports . Таким образом мы сообщаем модульной системе CommonJS, что хотим позволить другим функциям использовать модуль.

Теперь обновим profile.js , он должен использовать модуль timeline . Можно создать новый модуль, который будет загружать информацию о пользователе, но пока давайте ограничимся одним модулем.

Если загрузить index.html в браузере, то отобразится пустая страница. В консоли (в developer tools) можно обнаружить ошибку:

Проблема в том, что браузеры не понимают модульную систему вроде CommonJS. Нужно предоставить браузеру формат, который он ожидает.

Веб-браузеры не понимают эти хорошо описанные модули. Нужно или добавить весь JavaScript-код в один файл и импортировать его, или нужно добавить все файлы вручную на страницу с помощью тега script . Используем бандлер модулей (module bundler) для решения этой проблемы. Бандлер модулей комбинируют разные модули и их зависимости в один файл в правильном порядке. Он может парсить код, написанный с использованием разных модульных систем, и комбинировать в один формат, понятный браузеру. Два популярных бандлера модулей это:

browserify: пакует npm-модули, чтобы потом использовать их в браузере. В случае с browserify приходится дополнительно подключать Grunt или Gulp для линтинга, запуска тестов и пр. Это значит, что нужно тратить время на работу с несколькими инструментами и интеграцией.
webpack: система сборки, которая предоставляет не только бандлинг (компоновку) модулей, но и может выполнять задачи, которыми занимаются Gulp/Grunt. К тому же, вебпак не ограничивается JavsScript-файлами, он может работать с другой статикой вроде CSS, картинок, html-компонентов и др. Вебпак также поддерживает очень полезную фичу — code splitting (разбиение кода). Большое приложение можно разбить на куски, которые загружаются по мере необходимости.

webpack берет модули с зависимостями и генерирует статические ресурсы, которые представляют эти модули

Это определение теперь имеет смысл, когда понятна решаемая проблема. Вебпак берет набор ресурсов и трансформирует их в наборы (бандлы).

Трансформацией ресурсов занимаются загрузчики, которые являются сердцем вебпака.

Для установки вебпака нужен node. Можно скачать node с официального сайта.

Теперь можно установить вебпак глобально:

Создайте новый модуль командой npm init . Она создаст файл package.json . Установите зависимости с помощью npm.

В дополнение, нужно установить вебпак как зависимость.

Замените index.html следующим кодом. Как видите, мы удалили все теги script для jquery и underscore. Также, вместо импорта js/profile.js импортируется dist/bundle.js .

Давайте создадим бандл.

Теперь страница работает нормально.

Можно сделать так, чтобы вебпак следил за изменениями и генерировал бандл автоматически. Для этого нужно запустить его с таким флагом:

Теперь вебпак не будет завершаться сам. При изменении файлов будет генерироваться новый бандл. Нужно лишь перезагрузить страницу в браузере. Давайте изменим profile.js :

Файл bundle.js , сгенерированный вебпаком, содержит много кода, относящегося к самому вебпаку, а ваш код там будет в измененном виде. Будет очень неудобно отлаживать приложение в браузере, в инструментах разработчика, например. Чтобы упростить себе жизнь, можно запустить вебпак с флагом devtools.

Вебпак сгенерирует source map для файла bundle.js. Source map связывает минимизированный и собранный в один файл код с исходным, несобранным кодом. Для тестирования можно добавить строчку debugger в profile.js

Перезагрузите страницу, и приложение остановится на этой строке.

Добавление CSS

В HTML выше видно, что мы загружаем /css/style.css . Вебпак умеет работать не только с JavaScript, но и с другой статикой, в том числе CSS. Удалите строку с /css/style.css из index.html . Мы будем подключать стили в profile.js таким образом:

Проблема в том, что вебпак не понимает CSS по умолчанию. Нужно установить пару загрузчиков для этого. Вот команда для установки необходимых загрузчиков:

Вебпак использует загрузчики для трансформации текста в нужный формат. Теперь нужно обновить require :

Синтаксис style!css! означает, что сначала нужно применить трансформацию css для конвертации текста из style.css в CSS, а потом применить стиль к странице с помощью трансформации style .

Запустите вебпак снова.

Чтобы не указывать все опции в командной строке, можно создать конфигурационный файл webpack.config.js в корне приложения:

Теперь можно запускать вебпак простой командой webpack -w .

Когда мы добавили style!css! в profile.js , мы смешали продакшен-код с конфигурацией вебпака. Можно перенести эту опцию в файл конфигурации.

После изменений конфигурации нужно перезапускать вебпак.

Самая интересная секция тут это декларация модулей. Тут мы указали, что если файл заканчивается на .css, то нужно применять трансформацию style!css! .

Горячая перезагрузка

Для горячей перезагрузки (hot reloading) нужен webpack-dev-server . Установите его так:

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

команда «webpack-dev-server» теперь выглядит как «webpack-serve»
отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и < stream: «stream-browserify» >в качестве алиаса в настройки вебпака

Что такое вебпак?

По большей части, сайты больше не пишутся на чистом HTML с небольшим количеством JavaScript — часто они создаются только с помощью JavaScript. Поэтому возникает необходимость в сборке, минификации и транспиляции кода. Вот где вебпак приходит на помощь.

Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

Вебпак также умеет делать много других вещей, но данная статья посвящена основам его настройки и использования.

Установка

Создаем директорию проекта и инициализируем его:

Устанавливаем webpack и webpack-cli в качестве зависимостей для разработки:

— сборщик модулей и ресурсов — интерфейс командной строки для вебпака

Отлично, у нас имеется Node.js-проект с установленными основными пакетами и файл «index.js». Займемся настройкой вебпака.

Базовая настройка

Приступим к настройке сборщика. Создаем файл «webpack.config.js» в корневой директории проекта.

Точка входа

Прежде всего, необходимо определить точку входа приложения, т.е. то, какие файлы вебпак будет компилировать. В приведенном примере мы определяем точку входа как «src/index.js»:

Точка выхода

Точка выхода — это директория, в которую помещаются скомпилированные вебпаком файлы. Установим точку выхода как «dist». Префикс "[name]" соответствует названию файла в src:

Минимальная настройка для сборки проекта готова. Добавляем скрипт «build» в файл «package.json», запускающий команду «webpack»:

В директории «dist» создается файл «index.bundle.js». Файл не изменился, но мы успешно осуществили сборку проекта.

Плагины

Интерфейс плагинов делает вебпак очень гибким. Плагины используются как самим вебпаком, так и сторонними расширениями. Некоторые плагины используются почти в каждом проекте.

Плагин создания HTML на основе шаблона

У нас есть готовая сборка, но она бесполезна без разметки, которая загрузит сборку в качестве скрипта. Поскольку мы хотим, чтобы такой HTML-файл генерировался автоматически, используем html-webpack-plugin.

Создаем файл «template.html» в директории «src». Мы можем добавить в шаблон переменные и другую информацию. Добавим переменную «title», в остальном шаблон будет выглядеть как обычный HTML-файл с контейнером с идентификатором «root»:

Добавляем в настройки вебпака свойство «plugins», где определяем плагин, название выходного файла (index.html) и шаблон:

Добавим немного контента в DOM. Изменим содержимое файла «index.js» и перезапустим сборку.

В открывшейся вкладке браузера вы должны увидеть заголовок, гласящий «Как интересно!». Также обратите внимание на уменьшение размера файла.

Очистка

Установим clean-webpack-plugin, очищающий директорию «dist» при каждой сборке проекта. Это позволяет автоматически удалять старые файлы, ставшие ненужными.

Модули и загрузчики

Вебпак использует загрузчики для разбора файлов, загружаемых с помощью модулей. Это могут быть JavaScript-файлы, статические ресурсы, такие как изображения или стили и компиляторы, такие как TypeScript и Babel. Вебпак 5 имеет несколько встроенных загрузчиков ресурсов.

В нашем проекте имеется HTML-файл, который загружает некоторый скрипт, но больше он ничего не делает. Давайте подумаем, чего мы хотим от сборщика?

Компиляция новейших возможностей JavaScript в код, совместимый со всеми или большинством браузеров
Импорт стилей и преобразование SCSS в CSS
Импорт изображений и шрифтов
Настройка React или Vue (опционально)

Babel (JavaScript)

Babel — это инструмент, позволящий использовать будущий JavaScript сегодня.

Мы собираемся определить правило, согласно которому все файлы с расширением «js» в проекте (кроме файлов, содержащихся в директории «node_modules») будут транспилироваться с помощью babel-loader. Для работы Babel требуется несколько зависимостей:

— транспиляция файлов с помощью Babel и вебпака — транспиляция ES2015+ в обратно совместимый JavaScript — полезные стандартные настройки Babel — пример кастомной конфигурации Babel (установка свойств экземпляров в теле класса, а не в его конструкторе)

Если вы настраиваете TypeScript-проект, то вместо babel-loader следует использовать typescript-loader для всех JavaScript-файлов, нуждающихся в транспиляции. Вы проверяете файлы с расширением «ts» и используете ts-loader.

Итак, Babel настроен, но плагин еще нет. Вы можете убедиться в этом, добавив следующий код в начало index.js:

Запускаем сборку с помощью yarn build. Теперь все работает.

Изображения

Мы хотим импортировать изображения в JavaScript-файл, но JavaScript не умеет этого делать. Чтобы убедиться в этом, создаем директорию «src/images», помещаем туда изображение и пытаемся импортировать его в файле «index.js»:

При запуске сборки будет выброшено исключение:

Как отмечалось ранее, вебпак обладает некоторыми встроенными загрузчиками для работы со статическими файлами. Для изображений следует использовать тип «asset/resource». Обратите внимание, что речь идет именно о типе (type), а не о загрузчике (loader):

В директории «dist» появляется новый файл.

Шрифты и другие встраиваемые данные

Вебпак также имеет встроенный модуль для обработки некоторых встраеваемых данных, таких как шрифты и SVG. Для этого достаточно указать тип «asset/inline»:

Стили

Использование загрузчиков стилей является необходимым условием использования строк наподобие «import 'file.css'» в скрипте.

Многие люди используют CSS-in-JS, стилизованные компоненты (styled components) и другие инструменты, позволяющие использовать стили в JavaScript.

Порой мы можем ограничиться загрузкой одного CSS-файла. Но, возможно, вы хотите использовать PostCSS, позволяющий использовать последние возможности CSS в браузере. Или вы хотите использовать препроцессор Sass.

Я хочу использовать все три — писать код на Sass, обрабатывать его с помощью PostCSS и компилировать в CSS.

— загружает SCSS и компилирует его в CSS — Node Sass — обработка CSS с помощью PostCSS — полезные настройки PostCSS — загрузка стилей — применение стилей к элементам DOM

Как и для Babel, для PostCSS требуется отдельный файл настроек:

Для проверки работоспособности названных инструментов создадим файл «src/styles/main.scss», содержащий переменные Sass и пример использования PostCSS (lch):

Импортируем этот файл в index.js и добавляем 4 загрузчика. Загрузчики используются вебпаком справа налево, так что последним должен быть sass-loader, затем PostCSS, затем CSS и, наконец, style-loader, который применяет скомпилированные стили к элементам DOM:

После сборки вы заметите, что Sass и PostCSS применились к DOM.

Обратите внимание, что мы установили настройки для режима разработки. Для продакшна следует использовать MiniCssExtractPlugin вместо style-loader, который экспортирует минифицированный CSS.

Разработка

Каждый раз набирать команду yarn build (npm run build) при необходимости повторной сборки проекта может быть утомительным. Чем больше проект, тем дольше он будет собираться. Поэтому необходимо иметь два файла настроек вебпака:

Настройки для продакшна, включающие минификацию, оптимизацию и удаление всех карт ресурсов (source maps)
Настройки для разработки, включая запуск сервера, обновление при каждом изменении и карты ресурсов

Для этого необходимо установить webpack-dev-server.

В целях демонстрации принципов использования сервера для разработки мы можем определить соответствующие настройки в файле «webpack.config.js». На практике лучше иметь два файла настроек: один с mode: production и другой с mode: development. В специально подготовленной для вас webpack 5 boilerplate я использую webpack-merge для получения базовых настроек в виде одного файла, а специальные требования содержатся в файлах «webpack.prod.js» и «webpack.dev.js».

Мы добавили mode: development и свойство «devServer». В данном свойстве содержится несколько стандартных настроек — номер порта (8080), автоматическое открытие браузера, использование hot-module-replacement, для которого нужен webpack.HotModuleReplacement(). Это позволит модулям обновляться без полной перезагрузки страницы, т.е. если изменятся отдельные стили, только они будут обновлены, вам не потребуется перезагружать JavaScript, что очень сильно ускоряет разработку.

Для запуска сервера используется команда «webpack serve»:

После запуска этой команды браузер откроется по адресу localhost:8080. Теперь вы можете изменять Sass и JavaScript и они будут обновляться на лету.

Читайте также: