本篇我们将学到以下:
- 如何跟踪打包后的文件的错误
- 如何提高开发效率?
如何跟踪打包后的文件的错误
配置 devtool 选项,在有错误时浏览器能精确的提示出错误以及位置。
devtool: 'source-map'
如何提高开发效率?
方法一,--watch
添加 script 脚本,
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
},
使用 watch 脚本执行,之后每次改动文件都会自动重新打包。
可能不好的地方:
- url 地址协议为 file 协议
- 打包后不会自动打开浏览器
- 修改文件后需要刷新浏览器
方法二,webpack-dev-server
好处是:
- 模拟 web 服务器,地址为 http 开头
- 可以配置打包后自动打开浏览器
- 修改文件后自动刷新浏览器
使用。下载。npm install --save-dev webpack-dev-server
然后执行 webpack 脚本的时候加上 serve 参数。
添加脚本并启动,可以看到自动打开了浏览器并且可以访问。
"dev": "webpack serve --open",