webpack5 笔记四，开发环境

本篇我们将学到以下：

1. 如何跟踪打包后的文件的错误
2. 如何提高开发效率？

如何跟踪打包后的文件的错误

配置 devtool 选项，在有错误时浏览器能精确的提示出错误以及位置。

devtool: 'source-map'

如何提高开发效率？

方法一，--watch

添加 script 脚本，

  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },

使用 watch 脚本执行，之后每次改动文件都会自动重新打包。

可能不好的地方：

1. url 地址协议为 file 协议
2. 打包后不会自动打开浏览器
3. 修改文件后需要刷新浏览器

方法二，webpack-dev-server

好处是：

1. 模拟 web 服务器，地址为 http 开头
2. 可以配置打包后自动打开浏览器
3. 修改文件后自动刷新浏览器

使用。下载。npm install --save-dev webpack-dev-server

然后执行 webpack 脚本的时候加上 serve 参数。

添加脚本并启动，可以看到自动打开了浏览器并且可以访问。

"dev": "webpack serve --open",