SourceMap配置
https://www.webpackjs.com/configuration/devtool/
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 | const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'none',
entry: './src/index.js',
module: {
rules: [{
test: /\.(jpg|pnd|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 20480
}
}
},{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
}]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
}
|
index.js
| consoe.log('hello world')
|
上面的console
写成了consoe
,控制台会报错,但是只能检测到main.js
对应的位置出错,但是不知道index.js
哪一行出错
sourceMap,它是一个映射关系,它知道dist目录下main.js文件第96实际上对应的是src目录下的index.js文件中的第一行
配置sourceMap
| mode: 'development',
devtool: 'source-map',
entry: './src/index.js',
|
| mode: 'development',
devtool: 'inline-source-map',
entry: './src/index.js',
|
使用inline-source-map
,不会将.map
文件放到dist
目录,而是放在main.js
中
| mode: 'development',
devtool: 'cheap-inline-source-map',
entry: './src/index.js',
|
使用cheap-inline-source-map
,只会告诉出错在哪一行,不会告诉在哪一列出错,
而且只会管业务代码是否出错,
这样打包效率会高一些
使用cheap-module-inline-source-map
通过添加module
,还会检测第三方模块的错误
| mode: 'development',
devtool: 'eval',
entry: './src/index.js',
|
eval效率最快,性能最好,对于比较复杂的代码打包出来的代码不容易理解
建议使用:cheap-module-eval-source-map
线上代码配置:
| mode: 'production',
devtool: 'cheap-module-source-map',
entry: './src/index.js',
|