• I metsource-map

    Generally, the code we package to the server is compressed and uglified. Some projects will be configured with a browser-compatible plug-ines6Code to convert toes5In this way, if the project deployed to the test server has problems during development and debugging, we cannot locate the problem well as shown in the following figure:source-mapThis will help you to locate the wrong line of code in that file, if the project is configured with some willes6Write code to convert toes5Plug-in for codesource-mapThe ability to map converted code to the original file allows the browser to refactor the original source and display the rebuilt original source in the debugger; The effect is as follows:

  • usesource-map

    在 webpackAdding to the configurationdevtoolDetailed configurations are described in the following figure:If the configuration content issource-mapIs generated according to the source filesource-mapFile and there’s a comment on the last line of the packaged code that points to the correspondingsource-mapThe diagram below:At the same timeChromeAlso add the following two items (which are checked by default) to the Settings of:

  • devtoolconfiguration

    So we talked about usesource-mapwithdevtoolConfiguration, here are some configuration options

    • Will not generatesource-mapSeveral configurations of
      • false: do not usesource-map
      • (none)Recommended for production environment: Do not writedevtoolThe configuration,modeisproductionThe default in the case of(none)
      • eval:modeisdevelpmentIn the case of default values, will not be generatedsource-mapFile, it will be inevalExecute code to add//# sourceURL=Comments, and debugging can also locate the code:

      Can also locate the wrong location:

    • source-map

      Generate correspondingsource-mapFile and adds a comment to the last line of the packaged code//#sourceMappingURL=build.js.map

    • eval-source-map

      Will be generatedsource-mapBut instead of creating a new file, it willDataUrlAdded to theevalThe following function looks like this:

    • cheap-source-map

      和source-mapIt’s going to generate onesource-mapFile and the packaged file will have a comment on the last line pointing to the correspondingsource-mapFile, but on browser error alertscheap-source-mapOnly prompt to row, not exactly to the corresponding column as shown in the figure below:

    • inline-source-map

      Will not generatesource-mapFile but the correspondingsource-mapWill be followed by the package fileDataUrlAdded to thebundleThe rest of the file looks like this:

  • nosources-source-map

    Will be generatedsourcemap, but generatedsourcemapOnly error messages are displayed, and no source code files are generated. The diagram below:

  • hidden-source-map

    Will be generatedsourcemap, also generates the corresponding file, but will not add comments to the last line of the package file, so want to usesource-mapYou need to add your own comments as shown below:

  • cheap-module-source-map(Recommended in development mode)

    If some projects use someloaderSuch asbabel-loaderSome manipulation of the source code that we just usecheap-source-mapThe debugging effects are as follows:The source code has this error on line 5 but this error is on line 4 becausebabelI did a little bit of translation to the source code so it’s going to be a little bit different than the source code. But if you usecheap-module-source-mapThe effect is as follows:This configuration is recommended in development mode because the discovery can accurately locate lines of code

  • The combined value

    Combination rules:

    • inline-|hidden-|eval: When there are three values, choose one of three;
    • nosources: optional value
    • cheapOptional value and can be followedmoduleThe value of the

    The combined equation is as follows:[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

  • A variety ofsource-mapPerformance: