1. 各模式对比

2. webpack配置不同 source-map

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

const allModes = [
  'eval',
  'cheap-eval-source-map',
  'cheap-module-eval-source-map',
  'eval-source-map',
  'cheap-source-map',
  'cheap-module-source-map',
  'inline-cheap-source-map',
  'inline-cheap-module-source-map',
  'source-map',
  'inline-source-map',
  'hidden-source-map',
  'nosources-source-map'
]

module.exports = allModes.map(item => {
  return {
    devtool: item,
    mode: 'none',
    entry: './src/main.js',
    output: {
      filename: `js/${item}.js`
    },
    module: {
      rules: [{
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }]
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: `${item}.html`
      })
    ]
  }
})

// src/main.js
const element = document.createElement('h2')
element.textContent = 'Hello world'
element.addEventListener('click', () => {
  alert('Hello webpack')
})

document.body.append(heading)

console.log111('main.js running')

# 1. 运行打包命令
npm run build
# 2. 运行 serve
serve dist

浏览器运行结果

3. 不同devtool之间的差异

3.1 eval

没有生成source-map，只能定位源代码文件的名称，不知道具体的行列信息

3.2 eval-source-map

生成了source-map，可以定位到具体的行列信息

3.3 cheap-eval-source-map

只能定位到行，不能定位列

3.4 cheap-module-eval-source-map

只能定位到行，不能定位列，不经过loader加工，和手写代码一样的源代码

总结：

• eval：是否使用eval执行模块代码
• cheap-Source Map：是否包含行信息
• module：是否能够得到Loader处理之前的源代码

3. 选择合适的source map

3.1 开发环境：cheap-module-eval-source-map

原因：

• 代码每行不超过80个字符(个人习惯)

• 经过loader转换过后的差异较大

• 首次打包速度慢无所谓，重写打包相对较快

3.2 生产模式：none

原因：

• Source Map会暴露源代码
• 调试是开发阶段的事情

3.2.1 如果对代码没有信心，可以使用nosources-source-map

• 可以找到错误信息所对应的源码位置，但不会暴露源代码内容