测试所用的配置文件:

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打包对比的更多相关文章

  1. 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题

    在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...

  2. 规范开发目录 及 webpack多环境打包文件配置

    规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  3. webpack快速入门——打包后如何调试

    在配置devtool时,webpack给我们提供了四种选项. source-map:在一个单独文件中产生一个完整且功能完全的文件.这个文件具有最好的source map,但是它会减慢打包速度: che ...

  4. webpack使用来打包前端代码

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  5. webpack react 单独打包 CSS

    webpack react 单独打包 CSS webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件 操作步骤: step1: 安 ...

  6. webpack实现模块化打包

    webpack打包应用和实现 1)安装webpack $ npm install webpack webpack-cli --save-dev 2)添加配置文件 webpack.config.js 3 ...

  7. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  8. webpack前端模块打包器

    webpack前端模块打包器 学习网址: https://doc.webpack-china.org/concepts/ http://www.runoob.com/w3cnote/webpack-t ...

  9. webpack配置自动打包重新运行npm run dev出现报错

    webpack配置自动打包重新运行npm run dev出现报错 运行npm run dev出现如下报错 Listening at http://localhost:8080(node:2328) U ...

随机推荐

  1. ylb:转换函数Cast,Convert 指定格式返回

    ylbtech-SQL Server:SQL Server-转换函数Cast,Convert 指定格式返回 转换函数Cast,Convert 指定格式返回. ylb:转换函数Cast,Convert ...

  2. Linux内核的引导

    1,当系统上电或复位时,CPU会将PC指针赋值为一个特定的地址0xFFFF0并执行该地址处的指令.在PC机中,该地址位于BIOS中,它保存在主板上的ROM或Flash中 2,BIOS运行时按照CMOS ...

  3. 百度 api 测试 & python

    ''' 一.文字转语音api,树莓派天气闹钟爬取实时天气数据转换为语音,设置树莓派计划任务 ''' from aip import AipSpeech import requests import r ...

  4. Linux 的计划任务(运维基础|可用于提权)

    Linux操作系统定时任务系统 Cron 入门 先写笔记: crontab -u //设定某个用户的cron服务,一般root用户在执行这个命令的时候需要此参数 crontab -l //列出某个用户 ...

  5. Vue 响应式属性

    本文参考自:https://www.w3cplus.com/vue/vue-reactivity-and-pitfalls.html 1.概述 当创建一个Vue实例时,每个数据属性.组件属性等都是可以 ...

  6. csdn开源夏令营-ospaf中期报告

    1.背景         随着将中期的代码托管到CSDN的平台上,ospaf(开源项目成熟度分析工具)已经有了小小的雏形.当然还远远不够.       首先还是要感谢这次活动组织方CSDN,感觉挺有G ...

  7. jquery插件范例代码

    // 创建一个闭包 (function($) { // 插件的定义 $.fn.hilight = function(options) { debug(this); // build main opti ...

  8. pom.xml基础配置

    pom.xml基础配置: maven中,最让我迷惑的还是那一堆配置! 就拿这个属性配置来说: 我需要让整个项目统一字符集编码,就需要设定 <project.build.sourceEncodin ...

  9. \\s+ split替换

    出自: http://www.tuicool.com/articles/vy2ymm 详解 "\\s+" 正则表达式中\s匹配任何空白字符,包括空格.制表符.换页符等等, 等价于[ ...

  10. css 使表格随着内容自动适应宽度

    所谓难而不会,会儿不难.这个问题让我纠结了很长时间,一句css解决了,仅仅靠一个属性 td { white-space: nowrap; }