hooyantsing's Blog

P21 source-map

字数统计: 678阅读时长: 3 min
2020/12/01

尚硅谷2020最新版Webpack5实战教程

什么是source-map

构建后的代码与源代码之间的映射关系表。方便透过构建后的代码调试源代码。同时可选隐藏源代码的功能。

如何使用

在 webpack.config.js 中加入 devtool: 'source-map' 即可,参数根据不同需求可选。

编写配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

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

module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname,'build'),
publicPath:'./'
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader']
},
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
esModule: false,
outputPath: 'imgs'
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',

devServer: {
contentBase: resolve(__dirname,'build'),
compress: true,
port: 3000,
hot: true
},

devtool: 'source-map'
// devtool: 'inlinesourece-map'
}

/*
source-map:一种提供源代码到构建后代码映射技术(如果构建后代码出错了,通过映射可以追踪到源代码错误)
[inline-|hidden-|eval-][nosources-][cheap-[module-]]sourece-map

source-map:外部
错误代码准确信息 和 源代码的错误位置
inlinesourece-map:内联
只生成一个内联 source-map
错误代码准确信息 和 源代码的错误位置
hidden-sourece-map:外部
错误代码准确信息,但是没有错误位置
不能追踪源代码错误,只能提示到构建后代码错误位置
eval-sourece-map:内联
每一个文件都生成对应的source-map,都在eval
错误代码准确信息 和 源代码的错误位置
nosources-sourece-map
错误代码准确信息,但没有任何源代码信息
cheap-sourece-map
错误代码准确信息 和 源代码的错误位置
只能精确到行
cheap-module-sourece-map
错误代码准确信息 和 源代码的错误位置
module 会将 lodaer 的 source map 加入进来

内联和外部区别:1.外部生成了文件,内联没有 2.内联构建速度更快

如何选择?
开发环境:速度快,调试更友好
速度快(eval > inline > cheap > ...)
最快:eval-cheap-source-map > eval-source-map
调试友好:source-map > cheap-module-sourece-map > cheap-sourece-map
综合考虑,推荐:eval-source-map
生产环境:源代码要不要隐藏?调试要不要更友好
内联会让代码体积非常大,内联全部排除
隐藏源代码:nosources-sourece-map hidden-sourece-map

*/
CATALOG
  1. 1. 什么是source-map
  2. 2. 如何使用