Webpack5 learning — source-map | August more text challenge

This is the second day of my participation in the August More text Challenge. For details, see:August is more challenging

Our code, when it runs in the browser, is packaged, so the code that runs in the browser is actually different from the code that we write;

It is difficult to debug the converted code when it needs to be debugged.

Because the corresponding line number, column number, and content will be inconsistent before and after compilation

It is difficult to debug transformed code when it needs to be debugged

Introduction to the

What is the source – the map

1. Source-map maps the transformed code to the original source file

   — is a mapping file between pre-compiled code and compiled code

   — source-map combines the compiled code on the file, allowing the browser to reversely deduce the pre-compiled source file

2. Let the browser refactor the original source and display the rebuilt original source in the debugger;

   – If the browser supports source-map, the browser will automatically map the error to the pre-compiled file during debugging

   ​

How do I enable source-map

1. Source map files are generated according to the source files. Webpack can be configured to generate source-map files during packaging.

   — For example, set devtool to source-map

2. Step 2: At the end of the transformed code, add a comment pointing to Sourcemap

   // 1. The name of the source-map file is xxx.js.map. The content of the source-map file looks like an object, and the map file does not support comments
   
   // 2. Add source-map to the last line of the packaged file (such as bundle.js)
   // The browser will find the corresponding source-map according to our comments, and restore our code according to the source-map, convenient for debugging
   
   // 3. Source-map annotation format is fixed to start with //#
   //# sourceMappingURL=common.bundle.js.map
   
   // 4. Not only js can have source-map, CSS can also have its own source-map
   Copy the code

Source-map Indicates the meanings of the parameters

For details, see the description of source-map in the MDN

// The source-map file does not support comments, so the comments are added here for easy understanding
// The values of some of the attributes have been moderately deleted for easier reading
{
  // There are three versions of source-map
  /* First edition: source-map generated files under the tape is 10 times the original file second edition: source-map generated files under the tape is 5 times the original file 50% of the first edition third edition: source-map generated files under the tape is 2.5 times the original file 50% of the second edition */
  "version": 3.// Which files to convert source-map and package code from (original file)
  "sources": [
    "webpack://webpack-demo/./src/js/format.js"."webpack://webpack-demo/./src/js/math.js"."webpack://webpack-demo/webpack/bootstrap"."webpack://webpack-demo/./src/index.js"].// Names of variables and attributes before conversion. For compilations such as development that do not require conversion names, the value of names is []
  "names": [
    "module"."exports"."num1"."__webpack_module_cache__"."__webpack_require__"].// "source-map" is used to map source-file information (" unavailable length quantity variable length "), and then a base64 VLQ encoding
  "mappings": "mCAAAA,EAAOC,QAAQC,MAAQ,IAAKC,QAAQC,IAAI,W,0ECAjC,MAAMC,EAAM,CAACC,EAAMC,IAASD,EAAOC,ICCtCC,EAA2B,GAG/B,SAASC,EAAoBC,GA E5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaV,QAGrB,IAAID,EAASQ,EAAyBE,GAAY,CAGjDT,QAAS,IAOV,OAHAY,EAAoBH, GAAUV,EAAQA,EAAOC,QAASQ,GAG/CT,EAAOC,QCpBfQ,EAAoBK,EAAI,SAASb,EAASc,GACzC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAAS P,EAAoBQ,EAAEhB,EAASe,IAC5EE,OAAOC,eAAelB,EAASe,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,MCJ3EP,EAAoBQ,EAAI,SAASK,EAAKC,GAAQ,OA AOL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,ICC/Fd,EAAoBkB,EAAI,SAAS1B,GACX,oBAAX2B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAelB,EAAS2B,OAAOC, YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAelB,EAAS,aAAc,CAAE6B,OAAO,K,qCCJvD,MAAMC,EAAO,EAAQ,KAErB,UAEA5B,QAAQC,IAAI2B,EAAK1B,IAAI ,EAAE,I".// The packaged file (the file loaded by the browser)
  "file": "js/bundle.js".// The specific code information before conversion - so that when you click on the error message, you can see the corresponding source code under the Sources TAB
  "sourcesContent": ["module.exports.print = () =>console.log('format')"."export const sum = (num1, num2) => num1 + num2"."// The module cache\nvar __webpack_module_cache__ = {}; \n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId]; \n\tif (cachedModule ! == undefined) {\n\t\treturn cachedModule.exports; \n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t}; \n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__); \n\n\t// Return the exports of the module\n\treturn module.exports; \n}\n\n"."// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && ! __webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] }); \n\t\t}\n\t}\n};"."__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }"."// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol ! == 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); \n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true }); \n};"."import format from './js/format'\nconst math = require('./js/math')\n\nformat.print()\n\nconsole.log(math.sum(2,5))"].// All sources are relative to the root directory
  "sourceRoot": ""
}
Copy the code

The eval optional value

Webpack gives us a huge number of options (currently 26) to handle source-map

Does not generate the source – the map

// in development mode, after each module there will be something like //# sourceURL=webpack://webpack-demo/./ SRC /js/format.js?" The code of
// To indicate the source file path for the packaged code
eval("module.exports.print = () =>console.log('format')\n\n//# sourceURL=webpack://webpack-demo/./src/js/format.js?");
Copy the code

source-map

Generate a separate source-map file and have a comment in the bundle pointing to the source-map file

Based on this comment, the development tool finds the source-map file and parses it

//# sourceMappingURL=bundle.js.map
Copy the code

eval-source-map

// The code wraps itself with the eval function and does not generate a separate source-map
// Source-map is embedded in base64 encoding after each packaged code
eval("module.exports.print = () =>console.log('format')//# sourceURL=[module]\n//# sourceMappingURL=data:application/json; charset=utf-8; base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly93ZWJwYWNrLWRlbW8vLi9zcmMvanMvZm9ybWF0LmpzPzhlNDIiXSwibmFtZXMiOltdL CJtYXBwaW5ncyI6IkFBQUEsb0JBQW9CIiwiZmlsZSI6Ii4vc3JjL2pzL2Zvcm1hdC5qcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIm1vZHVsZS5leHBvcnRzL nByaW50ID0gKCkgPT5jb25zb2xlLmxvZygnZm9ybWF0JykiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./src/js/format.js\n");
Copy the code

inline-source-map

Sourcemap is generated, but source-map is added to the end of the bundle after base64 encoding with DataUrl

cheap-source-map

Sourcemap is generated, but is more efficient because it does not generate Column Mapping.

Because in development, we only need the row information to usually locate the error

cheap-module-source-map

Sourcemap is generated, similar to cheap-source-map, but with better handling of sourcemap originating from loader

That is, some of our modules will be processed by the Loader, which will translate our code accordingly

If cheap-source-map is used, the code can only be restored to the code that has been processed by the Loader

If the cheap-modole-source-map is used, the code will revert to the diAM before the loader processes it

hidden-source-map

Sourcemap is generated, but there is no reference to the source-map file

This removes the sourcemap reference comment from the package file

// The comment below is deleted
//# sourceMappingURL=bundle.js.map
Copy the code

If we need to debug, manually add source-map at the end of the corresponding file

nosources-source-map

Sourcemap will be generated, but the generated Sourcemap will only have an error message, and will not generate the source code file

Combination of values

In fact, webPack provides us with 26 values that can be combined in multiple ways.

# the inline - | hidden - | eval: choose three value # nosources: optional value # being optional, and you can follow the module value; [inline-|hidden-|eval-] [nosources-] [cheap-[module-]]source-map #<none>(not written) and evalCopy the code

Source-map or cheap motule-source-map is recommended during development and testing

In release and production, false or < None > is recommended