对于devtool中的配置有十几种方式，搞不清楚到底该用哪种，于是对于每个配置都试着打包一遍，看看打包后的代码有何不同。

记录如下：

入口文件如下：

// print.js
import * as react from 'react';

class Test extends react.Component {
  render() {
    return (
      <div> This is test! </div>
    )
  }
}

webpack.config.js 配置文件如下：

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/print.js',
  devtool: 'false',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'TEST'
    }),
  ],
  output: {
    chunkFilename: '[name].js',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use:{
            loader: 'babel-loader'
        },
      }
    ]
  }
}

devtool的配置方式，大致分为如下4大类：

---

1：没有映射

• devtool: false：一般用于production环境，没有sourcemap映射。

---

2：eval方式的映射

• eval：module代码被包括在eval中执行，且在末尾添加# sourceURL=...，没有行映射，且代码是经过loader编译过的。

• eval-source-map：尾部添加了sourceMappingURL=...。

• cheap-eval-source-map：只有行对应，没有列对应，忽略loader的sourcemap，仅展示loader编译后的代码。

• cheap-module-eval-source-map(推荐开发使用,初次build慢，但rebuild快): 没有列映射的 SourceMaps 文件，loader 的 sourcemap被简化为只包含对应行的。

---

3：生成单独文件的映射

• source-map：会单独生成相应的main.js.map文件。如：
  

• cheap-source-map：没有列的映射，忽略loader的sourcemap。

• cheap-module-source-map：没有列映射的.map文件，且loader的sourcemap只包含对应行的。

---

4：映射信息直接追加在对应文件末尾

• inline-source-map： 将sourcemap信息追加到对应的文件末尾，会使得bundle文件变大。

• inline-cheap-source-map：类似于cheap-source-map，但是map信息是添加在bundle中。

• inline-cheap-module-source-map：类似于cheap-module-source-map，但是map信息是添加在bundle中。

• hidden-source-map：和source-map 相比，文件末尾少了//# sourceMappingURL=main.js.map，作用于：不希望浏览器公开源代码映射。

• nosources-source-map： 创建的main.js.map中没有sourceContent字段。

---

总的来说，如果配置中有cheap，则表示没有列映射同时没有loader的sourcemap(一般不能用于开发环境)，如果配置中有module，则表示有loader的sourcemap，所以开发环境中可以用cheap-module这种组合。