Best IT Recipes

Configure webpack to enable browser debugging

I am new to webpack and I am converting an existing web application to use it.

I use webpack to bind and minimize my JS, which is excellent at deployment, however this makes it very difficult to debug during development.

I usually use chrome built into the debugger to debug JS issues. (Or Firebug on firefox). However, with webpack, everything is driven into a single file, and debugging using this mechanism becomes difficult.

Is there a way to quickly turn on and off the package? or enable or disable mining?

I looked to see if there is any script bootloader configuration or other setting, but it does not look sharp.

I have not had time yet to convert everything to act as a module, and requires use. So I just use the "script! ./ file.js" template for my download.

+64
javascript webpack
Dec 23 '14 at 19:27
source share
3 answers

You can use source maps to keep the mapping between source code and related / reduced.

Webpack provides the devtool option to improve debugging in the developer tool by simply creating the source map of the linked file for you. This option can be used from the command line or used in the webpack.config.js configuration file.

Below you can find a far-fetched example using the command line to create a linked file (bundle.js) along with the generated source map file (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!'; };

If you open index.html in your browser (I use Chrome, but I think that it is also supported in other browsers), you will see on the Sources tab that you have a linked file according to the file: // scheme and the source files according to a special scheme webpack: //.

source map debugging

And yes, you can start debugging as if you had the source code! Try putting a breakpoint on one line and refresh the page.

breakpoint with source maps

+54
Oct 29 '15 at 19:11
source share

Look here

its bleaching which depreciates javascript. below, it has a list of various browser plugins and extensions, check them out.

You may be interested in FireFox Deminifier , it is supposed to weaken and stylize your javascript when it is extracted from the server.

enter image description here

+1
Dec 23 '14 at 19:35
source share

Source maps are very useful, as already indicated.
But sometimes choosing which source card to use can be a pain.

This commentary on one of the Problem with the original Webpack map can be useful for choosing which source map to use based on the requirements.

+1
May 17 '17 at 8:34 a.m.
source share


More articles:


All Articles