webpack笔记5-应用篇-source map控制台错误提醒

JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。这可以帮助我们追踪到错误和警告在源代码中的原始位置。

初始化项目且安装完webpack后：

配置webpack.config.js

const HtmlWebpackPlugin=require('html-webpack-plugin')//需要npm安装 

module.exports = {
    entry: './src/main.js',
    devtool: 'inline-source-map',//配置source map
    plugins:[
        new HtmlWebpackPlugin({
            title:'output management'
        })
    ],
    output:{
        filename:'bundle.js',
    },
 };

创建src文件夹和入口文件main.js

function Component(){
    var div=document.createElement('div')
    div.innerHTML="错误提醒"
    consoell.log('我打印一下字');//注意这里我故意把console打错
    return div
}
document.body.appendChild(Component())

打开打包后的index.html，发现浏览器控制台报错并且指示了错误的位置

这时候把错误改回来，发现没有报错且正确输出了