webpack使用source map定位到源代码

开发环境开启，线上环境关闭（会把业务逻辑暴露出来）

关键字

eval：使用eval包裹代码块
source map：产生.map文件
cheap：不包含列信息
inlie：将.map作为DataURI嵌入，不单独生成.map文件
module：包含loader的sourcemap信息

config.dev.js

module.exports = {
    devtool:'source-map'
}

测试

class Search extends React.Component{
    render(){
        debugger; //添加断点
        return <div className="search-text">
            Search Text<img src={timg}/>
            </div>;
    }
}

source-map 开启前（是打包后的代码）

image.png

source-map开启后

image.png