## source map
當 webpack 打包源代碼時，可能會很難追蹤到錯誤和警告在源代碼中的原始位置。例如，如果將三個源文件（`a.js`, `b.js` 和 `c.js`）打包到一個 bundle（`bundle.js`）中，而其中一個源文件包含一個錯誤，那么堆棧跟蹤就會簡單地指向到 `bundle.js`。這并通常沒有太多幫助，因為你可能需要準確地知道錯誤來自于哪個源文件。
為了更容易地追蹤錯誤和警告，JavaScript 提供了 [source map](http://blog.teamtreehouse.com/introduction-source-maps) 功能，將編譯后的代碼映射回原始源代碼。如果一個錯誤來自于 `b.js`，source map 就會明確的告訴你。
source map 有很多[不同的選項](https://doc.webpack-china.org/configuration/devtool)可用，請務必仔細閱讀它們，以便可以根據需要進行配置。
對于本指南，我們使用 `inline-source-map` 選項，這有助于解釋說明我們的目的（僅解釋說明，不要用于生產環境）：
**conf/webpack.config.js**
```js
const path = require('path');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].[chunkhash].js'
},
devtool: 'inline-source-map'
};
```
