Webpack different Devtools packaging comparison

The configuration file used for the test:

Const PATH = require (' path '); Const Htmlwebpackplugin= Require (' Html-webpack-plugin '); Const Cleanwebpackplugin= Require (' Clean-webpack-plugin ') Const Webpack= Require (' Webpack '); Module.exports={entry: {main:'./src/main.js '}, Output: {filename:' [name]. [Chunkhash].js ', Path:path.resolve (__dirname,' Dist '}, module: {rules: [{test:/\.css$/, use: [' Style-loader ', ' Css-loader ']}]}, plugins: [NewHtmlwebpackplugin ({title:' Output Management '    }),    NewCleanwebpackplugin ([' Dist ']), Devtool:' Eval '};

View Code

Eval

Function: Each module is converted to a string, wrapped with eval () and added # sourceURL at the end, i.e. the relative path of the source file

eg

/** */** * * (function(module, exports, __webpack_ require__) {eval ("var chunk1=__webpack_require__ (1); \r\nvar chunk2=__webpack_require__ (2); \r\nconsole.log ( CHUNK1); \r\nconsole.log (CHUNK2); \n\n//////////////////\n//WEBPACK footer\n//./src/main.js\n//Module ID = 0\n// module chunks = 0\n\n//# sourceurl=webpack:///./src/main.js? " ); /* * */ })

Directories generated when Chrome is debugged:

--------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------

Source-map

Function: Package to generate Sourcemap file at the same time, add #sourcemappingurl to the end of the package file, point to the map file location, is the most primitive source-map implementation way

eg

/** */** * * (function(module, exports) {var chunk2=1; exports.chunk2=chunk2; /* * */  })/******/ ]); // # Sourcemappingurl=main.8d3572550fb49c53af7f.js.map

--------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------

Hidden-source-map

Function: More Source-map, no #sourcemappingurl (so hide map)

No extra folders generated during Chrome debugging

--------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------

Inline-source-map

Function: #sourcemappingurl generated after packaging, followed by Sourcemap file base64 encoded string (map file exists in line as a string)

/** */** * * (function(module, exports) {var chunk2=1; exports.chunk2=chunk2; /* * */  })/******/ ]); // # Sourcemappingurl=data:application/json;charset=utf-8;base .....

--------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------

Eval-source-map

Function: Each module is converted to a string, followed by #sourcemappingurl (base64) and #sourceurl

/*2*//***/(function(module, exports) {eval ("Var chunk2=1;\r\nexports.chunk2=chunk2;//# sourceurl=[module]\n//# Sourcemappingurl=data:application/json; Charset=utf-8;base64, Eyj2zxjzaw9uijozlcjzb3vyy2vzijpbindlynbhy2s6ly8vli9zcmmvy2h1bmsylmpzp2e0nguixswibmftzxmioltdlcjtyxbwaw5ncyi6ikfbque7qufdq Sisimzpbguioiiylmpziiwic291cmnlc0nvbnrlbnqiolsidmfyignodw5rmj0xo1xyxg5lehbvcnrzlmnodw5rmj1jahvuazi7xg5cblxuly8vly8vly8vly 8vly8vly8vxg4vlybxrujqqunliezpt1rfulxuly8gli9zcmmvy2h1bmsylmpzxg4vlybtb2r1bgugawqgpsayxg4vlybtb2r1bgugy2h1bmtzid0gmcjdlcj zb3vyy2vsb290ijoiin0=\n//# sourceurl=webpack-internal:///2\n ");/***/})

--------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------

Cheap-source-map

Same as Source-map, does not contain column information, does not contain loader Sourcemap

--------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------

Cheap-module-source-map

Does not contain column information, and Loader's sourcemap is also simplified to include only the corresponding row

can find

Where with eval, generate sourceURL, use eval () Wrap module

With Source-map, generate Sourcemappingurl, and the resulting map can be in many forms depending on the prefix:

Source-map: A separate map file

Inline-source-map: In-line Desource-map

Hidden-source-map: Hide Map (by canceling #sourcemappingurl)

....

Optimal configuration of the development environment:

Cheap-module-eval-source-map

Cheap: does not contain column information

Module: Simplifies loader sourcemap, supports Babel precompilation

Eval: Improve continuous build efficiency

Optimal configuration of the production environment:

Cheap-module-source-map

Note:

Summary from: http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

The Sourcemap file structure is as follows:

3"out.js" "",///Pre-conversion file directory sources: ["Foo.js", "Bar.js"],//convert before file names: ["src", " Maps "," is "," Fun "" Aagbc,saaq,caaea "//Location information }

Represents a converted line, one row can be from multiple locations

, representing a location after the conversion

First bit: Number of columns after conversion

Second position: sources which file

Third place: The first few lines of conversion

Fourth bit: first few columns before conversion

Fifth bit: Names which field

Webpack different Devtools packaging comparison