当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直接指向到 bundle.js。你可能需要准确地知道错误来自于哪个源文件，所以这种提示这通常不会提供太多帮助。

为了更容易地追踪 error 和 warning，JavaScript 提供了 source map 功能，可以将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

注意：
本工具仅用于开发环境，请不要在生产环境中使用它们！
webpack.config.js
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);

module.exports = {

• mode: ‘development’,//设置成开发模式
  entry: {
  app: ‘./src/index.js’,
  print: ‘./src/print.js’
  },
• devtool: ‘inline-source-map’,//加载 source-ma工具
  plugins: [
  new CleanWebpackPlugin([‘dist’]),
  new HtmlWebpackPlugin({
  title: ‘开发环境’
  })
  ],
  output: {
  filename: ‘[name].bundle.js’,
  path: path.resolve(__dirname, ‘dist’)
  }
  };