敲代码敲错很常见的,但不知道错误出在哪就会无从下手,本篇文章会让错误无处可逃
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,箭头函数我还在查找资料中,相信很快就能说说了。大家也要加油呦~~