webpack配置-source-map（让错误无处可逃）

敲代码敲错很常见的，但不知道错误出在哪就会无从下手，本篇文章会让错误无处可逃

1.设置一个简单的错误

创建一个index.js文件，内容如下：

function a() {
  console.log(321)
}
console.log(a())();

2.配置devtool

由于devtool的值有很多，在这里我就只展示cheap-module-source-map,剩下的值我会放在文章的最后，小伙伴们可以测试。

在webpack.config.js文件中配置

devtool属性和五大核心是同级别的。哎~~ 我怕小伙伴们添加错位置，我在最后放上全配置。

devtool: 'cheap-module-source-map'

配置完开始webpack打包，给朕上图~~好的好的

###### 打开 index,html 文件，在浏览器的控制台会发现详细的报错

3.devtool的全部值及介绍

更多信息可以进入webpack中文文档进行详细了解

如果有兴趣的小伙伴想要测试下面的值，建议使用HMR，方便很多事的呦

/* 
  source-map:  一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错，可以通过映射追踪到源代码错误）
    
  格式：[inline- | hidden- | eval-][nosources-][cheap-[module-]]source-map
    可以任意排列，但[]的顺序不能乱

  具体介绍

  source-map: 在外部生成一个文件
    在控制台会显示 错误代码准确信息 和 源代码的错误位置
  inline-source-map: 内嵌到bundle.js中
    只生成一个source-map
    在控制台会显示 错误代码准确信息 和 源代码的错误位置
  hidden-source-map: 外部
    错误代码错误原因，源代码的错误位置
    不能追踪源代码错误，只能提示到构建后代码的错误位置
  eval-source-map： 内嵌
    每一个文件都生成对应的source-map
    错误代码准确信息，源代码的错误位置
  nosources-source-map: 外部
    错误代码准确信息，没有任何源代码信息
  cheap-source-map: 外部
    错误代码准确信息，源代码的错误位置
    只能精准到行
  cheap-odule-source-map: 外部
    错误代码准确信息，源代码的错误位置
    module会将loader的source-map加入


    内嵌与外部的区别： 1.外部生成单独的文件，内嵌没有 2.内嵌构建速度快

    这么多source-map如何选择？
    开发环境：速度快，调试更友好
      速度快（ eval>inline>cheap>··· ）
        组合eval-cheap-source-map > eval-source-map
      调试更友好
        source-map > cheap-module-source-map > cheap-source-map
      最终结果：cheap-module-source-map 和 eval-source-map (vuecli与react脚手架默认)
    
    生产环境：源代码要不要隐藏？调试要不要更友好
      内嵌会让代码体积变大，所以在生产环境下不用内嵌
      nosources-source-map  全部隐藏
      hidden-source-map   只隐藏源代码，会提示构建后代码错误信息
      最终结果：source-map 和 cheap-module-source-map
*/

4.webpack.config.js文件全部配置

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: ['./src/index.js', './src/index.html'],
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'bundle')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'bundle'),
    compress: true,
    port: 3000,
    open: true,
    hot: true,  // 启用HMR模块
  },
  devtool: 'cheap-module-source-map'
}

5.结语

最终还是选择了source-map，箭头函数我还在查找资料中，相信很快就能说说了。大家也要加油呦~~