Настройте веб-пакет, чтобы разрешить отладку браузера

131

Я новичок в webpack и конвертирую существующее веб-приложение для его использования.

Я использую webpack для объединения и минимизации своего JS, что отлично при развертывании, однако из-за этого очень сложно отлаживать во время разработки.

Обычно я использую встроенный отладчик Chrome для отладки проблем с JS. (Или Firebug в firefox). Однако с помощью webpack все помещается в один файл, и отладка с использованием этого механизма становится сложной задачей.

Есть ли способ быстро включать и выключать бунделлинг? или включить и выключить минимизацию?

Я посмотрел, есть ли какая-то конфигурация загрузчика сценариев или другой параметр, но это не кажется очевидным.

У меня еще не было времени преобразовать все, чтобы оно работало как модуль и требует использования. Поэтому я просто использую шаблон require ("script! ./ file.js") для загрузки.

javascript webpack

— Джим
источник

3

Вы нашли решение этой проблемы? Я также предпочитаю использовать консоль JS для просмотра доступных переменных. Моя основная проблема в том, что webpack скрывает все эти переменные внутри модуля, поэтому они становятся недоступными

— user1496984

2

Так и не нашли решения, поэтому, к сожалению, мы отказались от использования webpack.

— Джим

Что ты используешь сейчас? На момент написания webpack все еще казался самым популярным инструментом сборки, который я могу найти.

— Ричард

101

Вы можете использовать исходные карты, чтобы сохранить соответствие между вашим исходным кодом и объединенным / минимизированным кодом.

Webpack предоставляет опцию devtool для улучшения отладки в инструменте разработчика, просто создавая для вас исходную карту связанного файла. Этот параметр можно использовать из командной строки или использовать в файле конфигурации webpack.config.js .

Ниже вы можете найти надуманный пример использования командной строки для создания связанного файла ( bundle.js ) вместе с сгенерированным файлом исходной карты ( bundle.js.map ).

$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.74 kB       0  [emitted]  main
bundle.js.map  1.89 kB       0  [emitted]  main
   [0] ./entry.js 85 bytes {0} [built]
   [1] ./hello.js 59 bytes {0} [built]

index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

entry.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

hello.js

module.exports = function () {
  return 'Hello world!';
};

Если вы откроете index.html в своем браузере (я использую Chrome, но думаю, что он также поддерживается в других браузерах), вы увидите на вкладке « Источники», что у вас есть связанный файл в схеме file: // , а исходные файлы - в специальная схема webpack: // .

И да, вы можете начать отладку, как если бы у вас был исходный код! Попробуйте поставить точку останова в одну строку и обновить страницу.

— dreyescat
источник

2

bundle.map указывает на файл js, но что, если в фактическом файле js также есть карта, позволяющая сказать tsx или ts?

— Андрей Ковачик

4

Я думаю, что лучше настроить свой проект в режиме производства и разработки https://webpack.js.org/guides/production/ Он также включает в себя, как сопоставить ваш код для отладки

devtool: 'inline-source-map'

— м-Фархан
источник

3

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

Этот комментарий к одной из проблем с исходной картой Webpack может быть полезен при выборе исходной карты для использования в зависимости от требований.

— Абхинав Синги
источник

1

Посмотреть здесь

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

вам может быть интересен FireFox Deminifier , он должен разминировать и стилизовать ваш javascript, когда он получен с сервера.

введите описание изображения здесь

— Банан
источник

10

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

— Джим

1

Chrome также имеет параметр форматирования в отладчике. В нем нет всей информации, которая была бы в обычном исходном файле, но это отличное начало, также вы можете установить точки останова. Кнопка, которую вы нажимаете, находится в нижнем левом углу первого снимка экрана, выглядит как {}.

Перед форматированием:

После форматирования.

— Jolly1234
источник