webpack不同devtools打包对比
测试所用的配置文件:
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'
};
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打包对比的更多相关文章
- 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题
在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...
- 规范开发目录 及 webpack多环境打包文件配置
规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...
- webpack快速入门——打包后如何调试
在配置devtool时,webpack给我们提供了四种选项. source-map:在一个单独文件中产生一个完整且功能完全的文件.这个文件具有最好的source map,但是它会减慢打包速度: che ...
- webpack使用来打包前端代码
使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...
- webpack react 单独打包 CSS
webpack react 单独打包 CSS webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件 操作步骤: step1: 安 ...
- webpack实现模块化打包
webpack打包应用和实现 1)安装webpack $ npm install webpack webpack-cli --save-dev 2)添加配置文件 webpack.config.js 3 ...
- vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大
从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...
- webpack前端模块打包器
webpack前端模块打包器 学习网址: https://doc.webpack-china.org/concepts/ http://www.runoob.com/w3cnote/webpack-t ...
- webpack配置自动打包重新运行npm run dev出现报错
webpack配置自动打包重新运行npm run dev出现报错 运行npm run dev出现如下报错 Listening at http://localhost:8080(node:2328) U ...
随机推荐
- SilverLight-DataConversion: 银光数据转换
ylbtech-SilverLight-DataConversion: 银光数据转换 1.A, Silverlight字符串格式表 1.B, 价格格式转换器 1.C, 日期时间格式转换器 1.D, 图 ...
- python traceback学习(转)
1. Python中的异常栈跟踪 之前在做Java的时候,异常对象默认就包含stacktrace相关的信息,通过异常对象的相关方法printStackTrace()和getStackTrace()等方 ...
- Solidworks如何制作动画1
1点击窗口下方的"运动算例1"可以弹出动画的面板,右击该"运动算例1"还可以对这个动画窗口重命名等操作. 2 我们从最简单的动画开始,假设图示装配体,想要把它从 ...
- STL源代码分析--第二级空间配置器
本文解说SGI STL空间配置器的第二级配置器. 相比第一级配置器,第二级配置器多了一些机制,避免小额区块造成内存的碎片.不不过碎片的问题,配置时的额外负担也是一个大问题.由于区块越小,额外负担所占的 ...
- Linux视频培训教程
很详尽的Linux培训教程,既包含日常工作常常要用到的实践及技巧,又包含Linux认证及系统管理及架构,讲的很不错.最关键的.这么具体,完整的教程还是免费的.花了点时间拿它整理了下. 第一部分: Li ...
- java移位运算符详解
http://soft.chinabyte.com/database/195/11553695.shtml java移位运算符不外乎就这三种:<<(左移).>>(带符号右移)和 ...
- iOS 从UITableViewController中分离数据源
之前看objc.io #1 Light View Controllers看到一个非常不错的技巧:从UITableViewController中分离数据源,这样能够减小UITableViewContro ...
- List中remove元素的理解
今天写了个简单的list中remove元素的方法,结果报错... List<String> ll = Arrays.asList("1","2",& ...
- 如何将linux服务器作为文件服务器
在开发过程中想要使用linux服务器作为文件服务器,可以通过 IP+文件名来获取文件信息,比如http://localhost/banner/a.jpg.设置过程如下 1.安装apache2 sudo ...
- JAVA使用并行流(ParallelStream)时要注意的一些问题
https://blog.csdn.net/xuxiaoyinliu/article/details/73040808