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'
};

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哪個字段