webpack不同devtools打包对比

发布时间：2023-09-06 01:31责任编辑：林大明关键词：webpack

测试所用的配置文件:

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: [ ?????new HtmlWebpackPlugin({ ??????title: ‘Output Management‘ ???}), ???new CleanWebpackPlugin([‘dist‘]) ?], ?devtool: ‘eval‘};

View Code

eval

功能: 每个模块都转化为字符串，用eval()包裹，并在尾部添加# sourceURL，即源文件的相对路径

eg:

/* 0 *//***/ (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?");/***/ })

chrome调试时生成的目录:

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

source-map

功能:打包的同时生成sourcemap文件，在打包文件末尾加上#sourceMappingURL,指向map文件位置,是最原始的source-map实现方式

eg:

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

hidden-source-map

功能: 较source-map，没有#sourceMappingURL（这样就hide了map）

chrome调试时没有生成额外文件夹

inline-source-map

功能: 打包后生成的#sourceMappingURL，后接sourcemap文件base64编码后的字符串（map文件以字符串的形式存在于行内）

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

eval-source-map

功能: 每个模块转化为字符串，后接#sourceMappingURL(base64)和#sourceURL

/* 2 *//***/ (function(module, exports) {eval("var chunk2=1;\r\nexports.chunk2=chunk2;//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvY2h1bmsyLmpzP2E0NGUiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQSIsImZpbGUiOiIyLmpzIiwic291cmNlc0NvbnRlbnQiOlsidmFyIGNodW5rMj0xO1xyXG5leHBvcnRzLmNodW5rMj1jaHVuazI7XG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9zcmMvY2h1bmsyLmpzXG4vLyBtb2R1bGUgaWQgPSAyXG4vLyBtb2R1bGUgY2h1bmtzID0gMCJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///2\n");/***/ })

cheap-source-map

同source-map，不包含列信息，不包含loader的sourcemap

cheap-module-source-map

不包含列信息，同时loader的sourcemap也被简化为只包含对应行的

可以发现

凡带有eval，生成sourceURL，用eval()包裹模块

带有source-map，生成sourceMappingURL,而生成的map根据前缀可为多种形式:

source-map: 单独的map文件

inline-source-map: 行内desource-map

hidden-source-map: 隐藏map(通过取消#sourceMappingURL)

....

开发环境最佳配置:

cheap-module-eval-source-map

cheap: 不包含列信息

module: 简化loader的sourcemap，支持babel预编译

eval: 提高持续构建效率

生产环境最佳配置:

cheap-module-source-map

备注:

总结自: http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

sourcemap文件结构如下:

{　　version : 3, //source map版本　　file: "out.js", //转换后的文件名　　sourceRoot : "", //转换前文件所在目录　　sources: ["foo.js", "bar.js"], //转换前文件　　names: ["src", "maps", "are", "fun"], //转换前所有变量名和属性名　　mappings: "AAgBC,SAAQ,CAAEA" //位置信息}

；代表转换后的一行，一行可由多个位置

，代表转换后的一个位置

第一位: 转换后第几列

第二位: sources哪一个文件

第三位: 转换前第几行

第四位: 转换前第几列

第五位: names哪一个字段

webpack不同devtools打包对比

原文地址：http://www.cnblogs.com/yanze/p/7874235.html

webpack不同devtools打包对比

知识推荐