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

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

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

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

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

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

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

Ответ 1

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

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://.

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

Ответ 2

Посмотрите Здесь

его обесцвечивающий, который обесценивает javascript. внизу, у него есть список различных плагинов и расширений для браузеров, проверьте их.

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

Ответ 3

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

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