目的:为了查看代码运行时的效果。

1. webpack-dev-server

  1. cnpm i webpack-dev-server -S
  2. //如果不装，该一行就要打包，然后再在dist/index.html看效果，很麻烦
  1. //webpack.config.js
  2.     devServer:{
  3.         contentBase:"./dist",
  4.         port:8000,//端口
  5.         overlay:{
  6.             errors:true
  7.         }//可以将报错显示在页面上
  8.     },
  1.   "scripts": {
  2.     "serve":"webpack serve --open"//添加
  3.   },
  1. npm run serve
  2. //自动浏览器运行http://localhost:8000/

2. 解决报错提示位置不明确

inline-source-map：实现错误追踪

  1. 因为会有编译的代码，导致行数不正确

image.pngimage.pngimage.png

  1. //webpack.config.js
  2. devtool:"inline-source-map",
  4. npm run serve
  5. //行数正确

image.png