一、sourceMap帮助开发者调试代码
1.1 devtool配置
1.1.1 devtool:'none'
代码语言：javascript复制devtool:'none'
报错提示：
main.js:96 Uncaught TypeError: console.logg is not a function
at Object../src/index.js (main.js:96)
at __webpack_require__ (main.js:20)
at main.js:84
at main.js:87
如果不小心写错了代码，打包之后，会提示报错信息，根据提示只能找到打包后的文件，不能找到源代码的文件。
1.1.2 devtool:'eval-source-map'
代码语言：javascript复制devtool:'eval-source-map'
提示：
index.js?b635:1 Uncaught TypeError: console.logg is not a function
at eval (index.js?b635:1)
at Object../src/index.js (main.js:96)
at __webpack_require__ (main.js:20)
at main.js:84
at main.js:87
这里就指向了源代码的报错位置，更利于开发的修改。source-map 打包之后会生成一个.map文件，是打包文件与源文件的映射文件。
1.1.3 配置开发环境
代码语言：javascript复制mode:'development',
devtool:'cheap-module-eval-source-map', // 开发环境 优点：有错误代码提示 打包速度较快
1.1. 4 配置生产环境
代码语言：javascript复制mode:'production',
devtool:'cheap-module-source-map', // 生产环境 打包一次，错误代码提示
1.1.5 总结
- **cheap:错误代码只定位到行，不会定位到列 **
- **module:错误代码不仅提示源代码，还提示loader中的报错信息 **
- eval:不会生成map文件，会使用eval语句展示映射关系
二、简化打包流程
2.1 安装依赖
代码语言：javascript复制npm install webpack-dev-server --save-dev
2.2 修改package.json
代码语言：javascript复制 "scripts": {
"build": "webpack",
"watch": "webpack --watch",
"dev": "webpack-dev-server"
},
2.3 npm run dev
之前的开发流程：修改源代码 -> 重新执行 npm run build 进行打包 -> 刷新页面 -> 看到最新的源代码执行的结果。
使用webpackDevServer 优化流程: 修改了源代码 -> 直接就看到最新的源代码执行的结果。（npm run dev）提升开发效率
devServer:{
contentBase:'./dist',
open:true, //在server启动后打开浏览器
port: 3000, // 指定监听请求的端口号
},
2.4 watch
代码语言：javascript复制"watch":"webpack --watch",
监听源代码是否变化，如果变化就重新打包，但是打包后的文件没有index文件，需要自己手动添加
三、请求转发
由于在实际情况下，线上环境和本地环境不是同一个地址，本地开发需要做代理。
3.1 安装依赖
代码语言：javascript复制npm install axios --save-dev
3.2 配置webpack.config.js文件
代码语言：javascript复制devServer:{
contentBase:'./dist',
open:true,//在server启动后打开浏览器
port: 3000,// 指定监听请求的端口号
proxy:{
'/Yixiantong':{
target:'http://study.jsplusplus.com',
changeOrigin:true
}
}
},
3.3 index.js文件
代码语言：javascript复制import axios from "axios"
axios.get('/Yixiantong/getHomeDatas').then(res=>{
console.log("res ",res)
})
请求到/Yixiantong/getHomeDatas现在会被代理到请求 http://localhost:3000/Yixiantong/getHomeDatas
proxy:{
'/api':{
target:'http://study.jsplusplus.com',
// target:'https://study.jsplusplus.com',// 如果是https，需要 secure:false,
// secure:false,
changeOrigin:true,
pathRewrite:{
'^/api':'' //以/api开头的都设置为'' 比如abc/api 等价于'' 意思是请求接口不需要以api开头，但是前端写的时候会有/api/
}
}
}
image.png
本示例提供完整代码：链接: https://pan.baidu.com/s/1NgqUSN-KErFBMKBSfGxopw 提取码: rhgr
