Configure o webpack para permitir a depuração do navegador

130

Eu sou novo no webpack e estou convertendo um aplicativo web existente para usá-lo.

Estou usando o webpack para agrupar e minificar meu JS, o que é ótimo quando implantado, no entanto, isso torna muito difícil depurar durante o desenvolvimento.

Normalmente, eu uso o depurador incorporado do chrome para depurar problemas de JS. (Ou Firebug no firefox). No entanto, com o webpack, tudo é empacotado em um arquivo e torna-se difícil depurar usando esse mecanismo.

Existe uma maneira de ativar e desativar rapidamente o agrupamento? ou ligar e desligar a minificação?

Eu olhei para ver se há alguma configuração do carregador de scripts ou outra configuração, mas ela não parece oviosa.

Eu ainda não tive tempo para converter tudo para agir como um módulo e usar requer. Então, eu simplesmente uso o padrão require ("script! ./ file.js") para o meu carregamento.

javascript webpack Jim
fonte
3
Você acabou encontrando uma solução para esse problema? Também prefiro usar o console JS para examinar as variáveis ​​disponíveis. Meu problema principal é que Webpack esconde todas essas variáveis no interior do módulo, para que se tornem inacessíveis
user1496984
2
Como realmente nunca encontramos uma solução, infelizmente abortamos o uso do webpack.
Jim
O que você usa agora? No momento em que escrevi, o webpack ainda parece ser a ferramenta de compilação mais popular que posso encontrar.
Richard

Respostas:

100

Você pode usar os mapas de origem para preservar o mapeamento entre seu código-fonte e o fornecido / compactado.

O Webpack fornece a opção devtool para aprimorar a depuração na ferramenta de desenvolvedor, apenas criando um mapa de origem do arquivo em pacote para você. Esta opção pode ser usada na linha de comandos ou no arquivo de configuração webpack.config.js .

Abaixo, você pode encontrar um exemplo artificial usando a linha de comandos para gerar o arquivo em pacote configurável ( bundle.js ) junto com o arquivo de mapa de origem gerado ( 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!';
};

Se você abrir o index.html no seu navegador (eu uso o Chrome, mas acho que também é suportado em outros navegadores), você verá na guia Fontes que você tem o arquivo agrupado no esquema file: // e os arquivos de origem em o esquema especial webpack: // .

depurar com mapas de origem

E sim, você pode começar a depurar como se tivesse o código fonte original! Tente colocar um ponto de interrupção em uma linha e atualize a página.

ponto de interrupção com mapas de origem

dreyescat
fonte
2
bundle.map aponta para o arquivo js, ​​mas e se o arquivo js real também tiver um mapa para digitar tsx ou ts?
Andrej Kovacik
4

Acho melhor configurar seu projeto usando o modo de produção e desenvolvimento https://webpack.js.org/guides/production/ Também inclui como mapear seu código para depuração

devtool: 'inline-source-map'

m-farhan
fonte
3

Os mapas de origem são muito úteis, como já apontado.
Mas, às vezes, selecionar qual mapa de origem usar pode ser uma dor.

Esse comentário sobre um problema de mapa de origem do Webpack pode ser útil para selecionar qual mapa de origem usar com base nos requisitos.

Abhinav Singi
fonte
1

Dar uma olhada aqui

é um embelezador que desminifica o javascript. na parte inferior, há uma lista de vários plugins e extensões para navegadores, confira.

você pode estar interessado no FireFox Deminifier , que deve desminificar e estilizar seu javascript quando ele for recuperado do servidor.

insira a descrição da imagem aqui

Banana
fonte
10
desminificar não é o mesmo que desabilitar a minificação, pois os comentários ainda são removidos, os números das linhas não correspondem mais e os nomes das variáveis ​​não são os mesmos. Dito isto, é melhor do que nada.
Jim
1

O Chrome também tem uma opção de formato no depurador. Ele não tem todas as informações que um arquivo de origem normal teria, mas é um ótimo começo, também é possível definir pontos de interrupção. O botão no qual você clica fica na parte inferior esquerda da primeira captura de tela, se parece com {}.

Antes de formatar: insira a descrição da imagem aqui

Após a formatação.

insira a descrição da imagem aqui

Jolly1234
fonte