webpack4个人学习详细笔记（八）--配置source-ma

因为我们打包上线后的代码会被压缩等处理，导致所有代码都被压缩成了一行，如果代码中出现错误，那么浏览器只会提示出错位置在第一行，一旦报错，找不到源码。所以webpack 提供了一个 devtool 属性来配置源码映射

yarn add babel-loader @babel/core @babel/preset-env
webpack-dev-server -D

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    home: './src/index.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: { // 用babel-loader,需要把es6-->es5
            presets: [ // 插件库
              '@babel/preset-env'
            ],
            exclude: path.resolve(__dirname, 'node_modules'),
          }
        }
      }
    ]
  },
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'home.html',
    }),
  ],
}

image.png
image.png

所以为了方便调试，要配置source-map

  // 1）源码映射，会单独生成一个soucemap 文件，出错了会标识当前报错的列和行，大和全
  devtool: 'source-map', // 增加映射文件，可以帮我们调试源代码
  output: {
    .....
  },

image.png
image.png

2）每个 module 会通过 eval() 来执行，并且生成一个 DataUrl 形式的 SourceMap (即 base64 编码形式内嵌到 eval 语句末尾), 但是不会生成 .map 文，可以减少网络请求，但是打包文件会非常大。

devtool: 'eval-source-map',

3） 加上 cheap，就只会提示到第几行报错，少了列信息提示，同时不会对引入的库做映射，提高打包性能，会产生 .map 文件。

devtool: 'cheap-source-map'

4. 和 cheap-source-map 相比，加上了 module，就会对引入的库做映射，并且也会产生 .map 文件，用于生产环境。

devtool: 'cheap-module-source-map',

5） 常用于开发环境，使用 cheap 模式可以大幅提高 souremap 生成的效率，加上 module 同时会对引入的库做映射，eval 提高打包构建速度，并且不会产生 .map 文件减少网络请求

  devtool: 'cheap-module-eval-source-map',