Webpack devtool details, webpackdevtool

Webpack devtool details, webpackdevtool

About Devtool

This option controls whether and how to generate source ing. Available values on the official website include:

Some values are suitable for development and some for production. For Development, you usually need quick Source Maps at the cost of bundle size. However, for production, you need independent Source Maps, which is accurate and can be minimized.

Select a source ing style to enhance the debugging process. These values can significantly affect the building and rebuilding speed. Instead of using the devtool option, you can also use SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin to directly have more options. Do not use the devtool options and plug-ins at the same time. The devtool option adds plug-ins internally, so you will eventually get the plug-ins applied twice.

Instance details

1. Create print. js

Export default function printMe () {console. log ('wuchang fish @ 100 ');}

2. Create index. js

import printMe from './print.js';function component() { var element = document.createElement('div'); var btn = document.createElement('button'); btn.innerHTML = 'Click 1me and check 1the console!'; btn.onclick = printMe; element.appendChild(btn); return element;}document.body.appendChild(component());

3. Create webpack. config. js

Const path = require ('path'); const CleanWebpackPlugin = require ('clean-webpack-plugin'); const HtmlWebpackPlugin = require ('html-webpack-plugin'); module. exports = {entry :'. /src/index. js', output: {filename: '[name]. js', path: path. resolve (_ dirname, 'dist')}, plugins: [new CleanWebpackPlugin (['dist']), new HtmlWebpackPlugin ({title: 'webpack devtool'})]};

4. Use different devtool options

 None

After packaging, click the print button. The console displays main. js: 96. The generated code is as follows:

Eval

In eval mode, each module is encapsulated in eval for execution and comments are appended at the end.

Each module is executed withevaland // @ sourceURL.

After packaging, click the print button. The console displays print. js: 3. The generated code is as follows:

Source-map

After packaging, you will find that an index. js. map File is added to your output directory, which records how the sourceMap row and column information maps to the source code. Click the print button and the console displays print. js: 3. The generated code is as follows:

Main. js

Main. js. map

Hidden-source-map

After packaging, the main. js option is less than the source-map option, but the index. js. map option in the output directory is not less. Click the print button and the console displays main. js: 96.

Inline-source-map

After packaging, we can see that the comment sourceMap at the end is embedded into the bundle as a DataURL. Because all information of sourceMap is added to the bundle, the entire bundle file becomes huge. Click the print button and the console displays print. js: 3. The generated code is as follows:

Main. js

Eval-source-map

Similar to eval, but the sourceMap in the annotation is converted to DataURL. Console displays print. js? Dc38: 2. The generated code is as follows:

Main. js

Cheap-source-map

The result is similar to that generated by source-map. The content of index. js in the output directory is the same. But the index generated by cheap-source-map. js. the content of map is better than the index generated by source-map. js. map requires much less code. Let's compare the index generated by source-map above. js. the map results show that the column information is missing in the source attribute, as shown below:

Main. js. map

Cheap-module-source-map

A map without column ing is generated in a separate file, which increases the packaging speed. However, the browser developer tool can only correspond to specific rows, it cannot correspond to specific columns (symbols), which may cause inconvenience to debugging;

Summary

 Recommended Development Environment:

1. eval: Each module uses eval () and // @ sourceURL for execution. This is very fast. The main drawback is that it does not display the row number correctly because it is mapped to the conversion code rather than the original code (there is no source ing from the loader ).

2. eval-source-map: Each module uses eval () for execution, while SourceMap is added to eval () as the DataUrl. Initially it was slow, but it provided fast reconstruction speed and generated real files. The row number is correctly mapped because it is mapped to the original code. It produces the best development resources.

3. cheap-eval-source-map: similar to eval-source-map, each module uses eval () for execution. It has no column ing, and only maps row numbers. It ignores source code from the loader and only displays converted code similar to eval devtool.

4. cheap-module-eval-source-map: similar to cheap-eval-source-map. In this example, the source ing from the loader is processed for better results. However, the loader source ing is simplified to a single ing for each row.

Recommended production environment:

1. (none): (The devtool option is omitted)-SourceMap is not triggered. This is a good choice.

2. source-map: a complete SourceMap is used as a separate file. It adds reference comments to the bundle, so the development tool knows where to find it.

3. hidden-source-map: it is the same as source-map, but does not add reference comments to bundle. You can use this option if you only want SourceMaps to map error stack traces from error reports, but do not want to expose your SourceMap for browser development tools.

4. nosources-source-map: A SourceMap is created without source code. It can be used to map stack traces on the client without exposing all source code. You can deploy the source ing file to webserver.