Как удалить webpack глобально с компьютера
У меня тоже была эта проблема долгое время. (webpack установлен глобально и т. д., но все еще не распознается) Оказалось, что я не указал переменную окружения для npm (где находится файл webpack.cmd), поэтому я добавляю в свою переменную Path
Если вы используете Powershell, вы можете ввести следующую команду, чтобы эффективно добавить в свой путь:
ВАЖНО: не забудьте закрыть и снова открыть окно PowerShell, чтобы применить это.
Я выполнил все шаги, но это не сработало, и, наконец, я понял, что не открывал CMD как администратор.
Лучшее решение этой проблемы - Webpack глобальная установка .
Это всегда работает, и это сработало для меня. Попробуйте команду ниже.
Я думаю, следует отметить, что использование -g устанавливает веб-пакет глобально, что может вам не понадобиться, если у вас есть несколько проектов, для которых могут потребоваться разные версии веб-пакета.
В качестве альтернативы, если у вас установлен локально Webpack, вы можете явно указать, где командная строка должна искать его, например:
(Это предполагает, что вы находитесь внутри каталога с вашим package.json и что вы уже запустили npm install webpack .)
Согласитесь с Максом, причина в том, что рекомендуется устанавливать веб-пакет локально (в devDependencies). Моя проблема была немного другой, но при добавлении веб-пакета в качестве этапа предварительной сборки в VS 2017 я думал, что VS достаточно умен, чтобы найти webpack cmd локально без полного пути
Вы можете попробовать использовать npx webpack which также проверяет ./node_modules/.bin вместо того, чтобы возиться с путями.
npm install -g webpack-dev-server решит вашу проблему
Попробуйте удалить node_modules в локальном каталоге и повторно запустить npm install .
Добавьте команду webpack как сценарий npm в свой package.json.
Когда веб-пакет установлен, он создает двоичный файл в папке ./node_modules/.bin. Скрипты npm также ищут исполняемый файл, созданный в этой папке
Интерфейс командной строки Webpack теперь находится в отдельном пакете и должен быть установлен глобально, чтобы использовать команду webpack:
РЕДАКТИРОВАТЬ: многое изменилось. Пользователи Webpack не рекомендуют устанавливать CLI глобально (или отдельно в этом отношении). Эта проблема должна быть исправлена сейчас, но правильная команда установки:
Этот ответ изначально был задуман как «временное решение» проблемы OP.
вам необходимо установить webpack и webpack-cli в одной области.
если вы устанавливаете его локально, вам нужно называть его специально
Или, если установлена локально, вы можете использовать npx webpack (проверено с npm версии 6.5.0, webpack 4.28.4 и webpack-cli 3.2.1)
Мы тоже столкнулись с этой проблемой, и мне нравятся все ответы, в которых предлагается использовать сценарий, определенный в package.json .
Для наших решений мы часто используем следующую последовательность:
- npm install --save-dev webpack-cli (если вы используете webpack v4 или новее, в противном случае используйте npm install --save-dev webpack , см. установку webpack , получено 19 января 2019 г.)
- npx webpack
Шаг 1 - разовый. Шаг 2 также проверяет ./node_modules/.bin . Вы также можете добавить второй шаг как сценарий npm package.json , например:
а затем используйте npm run build для выполнения этого сценария.
Протестировано это решение с npm версии 6.5.0, webpack версии 4.28.4 и webpack-cli версии 3.2.1 в Windows 10, выполняя все команды внутри окна PowerShell. Моя версия nodejs - 10.14.2. Я также тестировал это на Ubuntu Linux версии 18.04.
Я бы посоветовал не устанавливать webpack глобально, в частности, если вы работаете с большим количеством разных проектов, для каждого из которых может потребоваться другая версия webpack. Глобальная установка webpack привязывает вас к определенной версии для всех проектов на одном компьютере.
WebPack - это пакет модуля. Это будет статический анализ на основе зависимостей модуля, то эти модули затем генерируют соответствующие статические ресурсы в соответствии с указанными правилами.
Код разделен
Уэбпак имеет два способа, синхронные и асинхронные способы. Асинхронная зависимость как точка разделения, образует новый блок. После оптимизации полагаться на дереве каждый асинхронный блок упакован в виде файла.
Loader
Сам WebPack может работать только на родных модулях JavaScript, но преобразователь погрузчика может конвертировать различные типы ресурсов на модуль JavaScript. Таким образом, любой ресурс может быть модулем, который может обработать WebPack.
Интеллектуальный анализ
У WebPack есть умный парсер, который может обрабатывать любые сторонние библиотеки, независимо от их формы модуля - это Commandjs, AMD или Normal файлы JS. Динамические выражения допускаются даже при загрузке зависимости require("./templates/" + name + ".jade") 。
Framework vue.js сама не полагается на WebPack, но Vue Cli Scaffold - это упрощенная версия WebPack
Второй. Установка
Удалить глобальный WebPack-CLI
WebPack4.x Запуск официальной документации - установить CLI, поэтому, если вы используете 4. +, вам нужно удалить CLI.
Удалить локальный (локальный) WebPack-CLI
Удалить Global WebPack
Удалить локальный WebPack
Проверьте остаточные файлы WebPack
Установите WebPack
Далее позвольте мне сказать вам правильный способ установки WebPack4. +
На самом деле, официальная документация очень ясная, но она должна знать о некоторых деталях.
Создайте новый локальный каталог проекта с именем WebPack-Demo
Создать package.json файлы
Установка WebPack-CLI (Save-dev представляет установленные вещи как зависимые в Package.json)
Проверьте, если WebPack установлен успешно
III. Используйте
Пример 1:
Сам WebPack может обрабатывать только JS, а другие файлы также могут быть преобразованы в файлы JS через загрузчик, позволяющий обработать WebPack.
Сначала создайте статическую страницу index.html и запись ввода JS intrict.js:
Затем компилируйте intry.js и упакуйте его в bundle.js:
Используйте браузер для открытия index.html Увидим It works. 。
Далее, чтобы добавить модуль module.js И изменить вход entry.js :
Повторный пакет webpack entry.js bundle.js После освежения страницы см. Изменения It works.It works from module.js.
WebPack анализирует файлы ввода для анализа всех файлов, которые содержат зависимости. Эти файлы (модули) упаковываются в bundle.js. WebPack присваивает каждый модуль уникальным идентификатором и через этот идентификационный индекс и модуль доступа. Когда вы начинаете на странице, вы выполните код в intry.js, а другие модули будут работать require Когда выполняется снова.
Мы должны представить файл CSS Style.csss на странице, а домашняя страница также выглядит как модуль, затем использовать css-loader Читать это, используйте style-loader Вставьте его на страницу.
Изменить запись .js:
Скидка пакета, обновите страницу, вы можете увидеть предпосылку желтой страницы.
Если каждый раз require Когда файл CSS написан, вы должны написать префикс загрузчика, который является очень громоздкой. Мы можем использовать тип модуля (расширение) из требуемого погрузчика.
В intry.js. require("!style!css!./style.css") изменяться в require("./style.css") Затем выполните:
Очевидно, эти два способа использования погрузчика одинаковы.
Пример 2:
Когда WebPack выполнен, в дополнение к включению параметров в командной строке вы также можете выполнить по указанному профилю. По умолчанию вы будете искать текущий каталог. webpack.config.js Файл, этот файл является модулем Node.js, возвращает информационный объект конфигурации в формате JSON, или через --config Опции для указания файла конфигурации.
Продолжайте наш случай, создайте в корневом каталоге package.json Чтобы добавить потребности WebPack:
Не забудьте бежать npm install 。
Затем создайте файл конфигурации webpack.config.js :
В то же время упрощено entry.js середина style.css Режим загрузки:
Наконец пробежать webpack , Вы можете увидеть результат веб-папака через файл конфигурации и предыдущую главу через командную строку. webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader' Результат выполнения одинаково.
Примечание. В данной статье рассматриваются различные операции с точки зрения тестировщика, которые могут не сильно помочь партнерам по разработке. , ,
Я долго боролся и не смог установить нативный npm. Мне пришлось установить npm и веб-пакет, используя Taobaoyuan. Недавно я разработал новый справочник и мне нужно было перекомпилировать npm. Это ошибка, и обновление вообще не может быть выпущено. , ,
Я был огорчен, я решил полностью удалить npm, webpack и webpack-cli, установленные из источника Taobao, и установить нативный npm и webpack. Неожиданно, есть много проблем, связанных с легким удалением. , ,
Заранее заявите, что моя система 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. Вот моя текущая конфигурация веб-пакета:
Если я запускаю $(npm bin)/webpack --config webpack.js --watch и a.cjsx вношу изменения , он компилирует более новую версию этого файла с новым chunkedhash. Однако старый остался, и я бы хотел, чтобы его сразу удалили.
- Как я могу удалить старую версию фрагментированного файла?
- Есть ли способ подключиться к обратному вызову после завершения компиляции часов?
Для этих целей есть плагин clean-webpack или вы можете написать простой bash скрипт для npm :
К сожалению, плагин clean-webpack-plugin работает webpack --watch (он очистится один раз, после чего несколько версий одного и того же файла начнут накапливаться при каждом его изменении); возможно, потому, что на самом деле он не знает, какие фрагменты устарели.
Спасибо за план Б - сэкономил мне часы разочарований, пытаясь дважды не получить плагин clean-webpack-plugin для удаления материала.
@klewis вы можете использовать 'webpack-clean-obsolete-chunks' для удаления неиспользуемых файлов фрагментов
Вот webpack-clean-obsolete-chunks плагин, который делает то, что вы хотите. Он ищет все обновленные фрагменты и удаляет устаревшие файлы после каждой webpack компиляции.
Ответ
Я решил написать ответ, потому что другие, хотя и пытались ответить на вопрос напрямую, упустили, на мой взгляд, самую важную часть.
И самое главное : так делать нельзя. Использование [hash] заполнителей в вашей настройке разработки вызывает много проблем с другими инструментами (например, автозаполнение пути phpstorm в плагине Symfony). Также он плох для производительности инкрементальной компиляции webpack и поэтому не рекомендуется официальными документами webpack ( ссылка ).
Итак, для будущих читателей : просто сделайте это для конфигурации разработки - определите свой filename as [name].js и двигайтесь дальше.
Редактировать
Кажется, есть путаница в том, что делать со старыми файлами фрагментов на производственном сервере. Ну ты ничего не делаешь. После того, как версия развернута, ее нельзя изменять. Вы просто продолжаете создавать новые версии при развертывании и сохраняете предыдущие в качестве резервной копии. Почему?
Потому что вы хотите, чтобы откат был надежным, и чтобы он был возможен, откат должен быть чрезвычайно простым и атомарным. Если ваша процедура отката делает что-то большее, чем переключение символической ссылки, перенаправление на предыдущий контейнер (или аналогичную простую операцию), вы, вероятно, ™ столкнетесь с проблемами.
Откат - это не процесс повторного развертывания приложения, а теперь до предыдущей версии. Это процесс «невыполнения» развертывания. Таким образом, выполнение операции с git checkout предыдущей версией, за которой следует некоторое npm build --but-please-be-hurry --and-im-begging-you-dont-fail время, когда ваше производственное приложение висит там, полностью разорванное, здесь не подходит.
Восстановление предыдущей версии приложения, как и развертывание, может завершиться ошибкой по многим причинам. Вот почему откат должен состоять в переключении / перенаправлении обратно на ту же самую версию-сборку, которая, как было доказано, работает. Не то == же самое, 100% то === же самое. Вот почему вам нужно сохранить свою предыдущую версию, потому что это та же === самая. «Восстановленный» - в лучшем случае - только == один и тот же, и поэтому не доказано, что он работает, а только предполагается.
И нет, никакое количество CI, промежуточных сред или чего-либо еще не даст вам гарантированного успешного развертывания. Часть того, чтобы делать это правильно, - это быть готовым к тому, что что-то пойдет не так. И все будет идти не так. Надеюсь, только время от времени, но все же.
Конечно, как только у вас будет резервная копия 3, 5 или версий, вы можете начать удалять самые старые, поскольку вам, вероятно, никогда не понадобится больше 3.
Давайте сначала разберемся, зачем нужен вебпак (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 . Установите его так:
Теперь можно запускать сервер командой webpack-dev-server .
Порт можно изменить опцией --port .
Конфигурацию webpack-dev-server также можно указать в файле webpack.config.js , в секции devServer .
Читайте также: