我們先來看看文檔對這 7 種模式的解釋：

注1：

webpack不僅支持這 7 種，而且它們還是可以任意組合上面的eval、inline、hidden關鍵字，就如文檔所說，你可以設置 souremap 選項為 cheap-module-inline-source-map。

注2：

如果你的modules里面已經包含了SourceMaps，你需要用source-map-loader來和合并生成一個新的 SourceMaps。

使用結果有何不同

下面我們將列出這 7 種模式打包編譯后的結果，從中看看他們的異同：

eval

webpackJsonp([1],[ function(module,exports,__webpack_require__){  eval(   ...   //# sourceURL=webpack:///./src/js/index.js?'  ) }, function(module,exports,__webpack_require__){  eval(   ...   //# sourceURL=webpack:///./src/static/css/app.less?./~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/1.1.1/postcss-loader!./~/.npminstall/less-loader/2.2.3/less-loader'  ) }, function(module,exports,__webpack_require__){   eval(   ...    //# sourceURL=webpack:///./src/tmpl/appTemplate.tpl?"  ) },...])

eval 模式會把每個 module 封裝到eval 里包裹起來執行，并且會在末尾追加注釋。

Each module is executed withevaland//@ sourceURL.

source-map

webpackJsonp([1],[ function(e,t,i){...}, function(e,t,i){...}, function(e,t,i){...}, function(e,t,i){...}, ...])//# sourceMappingURL=index.js.map

與此同時，你會發現你的 output 目錄下多了一個index.js.map文件。

我們可以把這個 index.js.map 格式化一下，方便我們在下文的觀察比較：

{ "version":3, "sources":[  "webpack:///js/index.js","webpack:///./src/js/index.js",    "webpack:///./~/.npminstall/css-loader/0.23.1/css-loader/lib/css-base.js",  ...], "names":["webpackJsonp","module","exports"...], "mappings":"AAAAA,cAAc,IAER,SAASC...", "file":"js/index.js", "sourcesContent":[...], "sourceRoot":""}