因为我们打包上线后的代码会被压缩等处理，导致所有代码都被压缩成了一行，如果代码中出现错误，那么浏览器只会提示出错位置在第一行，一旦报错，找不到源码。所以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'
- 和 cheap-source-map 相比，加上了 module，就会对引入的库做映射，并且也会产生 .map 文件，用于生产环境。
devtool: 'cheap-module-source-map',
5） 常用于开发环境，使用 cheap 模式可以大幅提高 souremap 生成的效率，加上 module 同时会对引入的库做映射，eval 提高打包构建速度，并且不会产生 .map 文件减少网络请求
devtool: 'cheap-module-eval-source-map',
