一文学会Webpack实用功能|自动刷新

Webpack 开发体验问题

在此之前我们已经了解了一些webpack的相关概念和一些基本的用法，但是如果以目前的状态去应对日常的开发工作还远远不够，那是因为编写源代码，再通过webpack打包，然后运行应用，最后刷新浏览器这周周而复始的方式过于原始。

如果说我们在实际的开发过程中还按照这种方式去使用必然会大大降低我们的开发效率。那究竟该如何去提高我们的开发效率呢，那这里呢我们先对我们理想的开发环境做出设想。

首先我们希望这样一个开发环境他必须能够使用http的服务去运行而不是以文件的形式去预览，那这样我们一来可以更加接近生产环境的状态，二来呢我们可能需要去使用ajax之类的一些api，那这些api呢，文件的形式去访问他是不被支持的。

其次我们希望这样一个环境中，去修改源代码过后，webpack就可以自动帮我们完成构建，然后我们的浏览器可以及时的显示最新的结果，那这样的话就可以大大的减少我们在开发过程中额外的那些重复操作。

最后我们还需要这样一个环境它能够去提供sourceMap支持，那这样依赖的话我们运行过程中一旦出现了错误就可以根据错误的堆栈信息快速定位到源代码当中的位置，便于我们调试应用。

那对于以上这些需求呢webpack都已经有了相应的功能去实现了，那接下来我们一起去重点了解，具体如何去增强我们使用webpack的开发体验。

Webpack 自动编译

用命令行手动重复去使用webpack命令从而去得到最新的打包结果，这种办法特别的麻烦，我们也可以使用webpack-cli提供的一种，watch的工作模式去解决这个问题，如果说你之前了解过一些其他的构建工具。

那你应该对这种模式并不陌生，那在这种模式下面，我们项目下的源文件会被监视, 一旦这些文件发生变化，那他就会自动重新去运行我们的打包任务。

具体的用法也非常简单，就是我们再去启动webpack命令时我们添加一个–watch的参数，那这样的话webpack就会以监视的模式去运行。

yarn webpack --watch

那在打包完成过后呢，我们的cli不会立即退出，他会等待文件文件的变化，然后再次的工作一直到我们手动结束这个cli。

那在这种模式下面我们就只需要专注编码，不比再去手动的完成这些工作了。那这里我们可以在在开启一个新的命令行终端，同时以http的形式去运行我们的应用。

http-server ./dist

然后我们打开浏览器去预览我们的应用。

我们可以将浏览器移至我们屏幕的右侧，然后将编辑器移至左侧，那此时我们就可以尝试修改源代码，保存过后我们以观察模式工作的webpack就会自动重新打包，打包完成过后我们就可以到浏览器中取刷新页面，然后去查看最新的页面结果。

Webpack 自动刷新浏览器

通过watch模式启动webpack，当文件内容发生改变时，webpack就会自动编译，然后我们回到浏览器，手动刷新后就可以看到运行结果。

那如果说流浏览器能在编译过后自动去刷新，那我们的开发体验呢将会更好一些，那如果之前你已经了解过一个叫做，browser-sync的工具，那你就会知道这个工具呢就会帮我们实现这个自动刷新的功能。

yarn add --global browser-sync

那这里呢，我已经在全局范围安装了这个工具，我们这里先结束掉http-server启动的这个http服务，然后我们使用browser-sync去启动http服务。这里同时我们还要监听dist文件下的文件变化。

browser-sync dist --files "**/*"

那启动过后呢我们再回到编辑器当中，然后我们尝试修改源文件。那保存过后我们发现浏览器自动刷新然后去显示最新的结果。

那他的原理就是webpack自动打包我们的源代码到dist当中，那dist的文件变化又被browser-sync监听了，从而去实现了我们的自动编译并且自动刷新浏览器。

不过这种方式去解决有很多弊端，第一就是我们操作上太麻烦了，因为我们需要同时使用两个工具，第二就是我们再开发效率上会有一些降低，因为这个过程中webpack会不断将文件写入磁盘，然后browser-sync再把它从磁盘中读出来，那这个过程中，一次就会多出两步的磁盘读写操作。

所以说我们还需要继续去改善这个开发体验。

Webpack Dev Server

那根据他的名字我们就应该知道，他提供了一个开发服务器，并且他将自动编译和自动刷新浏览器等一系列对开发非常友好的功能呢都全部集成在了一起。

那我们这呢可以使用这个工具直接去解决我们之前的问题。那因为这是一个高度集成的工具，所以说他使用起来也非常的简单，我们这里打开命令行，然后我们通过yarn将webpack-dev-server作为我们项目的开发依赖去安装。

yarn add webpack-dev-server --dev

安装完成过后这个模块为我们提供了一个webpack-dev-server的cli程序。我们同样可以用过yarn去运行这个cli。或者可以把它定义到npm scripts中。

yarn webpack-dev-server

我们去运行这个命令，那他内部就会自动去使用webpack去打包我们的应用。并且会启动一个http-server去运行我们的打包结果。

在运行过后他还会监听我们的代码变化，一旦我们的源文件发生变化，他就会自动立即重新打包。那这一点和我们的watch模式是一样的。

不过这里我们也需要注意，webpack-dev-server为了提高工作效率他并没有将打包结果写入到磁盘中，根据我们左侧文件数我们可以发现并没有出现dist目录。他是将打包结果暂时存放在内存当中，而内部的http-server也就是从内存当中把这些文件读出来，然后发送给浏览器。那这样一来他就会减少很多磁盘不必要的读写操作，从而大大提高我们的构建效率。

这里我们还可以为这个命令传入一个–open的参数，用于自动唤起我们的浏览器，去打开我们的运行地址。

yarn webpack-dev-server --open

那打开浏览器过后呢，此时如果说你有两块屏幕的话就可以把浏览器放到另外一块屏幕当中，然后我们可以实现这种一边编码，一边及时预览的开发环境。

Webpack 静态资源访问

那此时我们的开发体验就是我们修改完文件会自动打包输出到浏览器，那也就是只要通过webpack打包能够输出的文件都可以正常被访问到。

但是如果你还有一些静态文件也需要作为开发服务器的资源被访问的话，那你就需要额外的去告诉webpack-dev-server。

具体的方法就是在我们webpack的配置文件当中去添加一个对应的配置，我们回到配置文件当中。

那这里我们在配置对象当中去添加一个dev-server的属性，那这个属性书专门用来为webpack-dev-server去指定相关的配置选项。

那我们可以通过这个配置对象的contentBase属性来去指定额外的静态资源路径。那这个属性可以是一个字符串或者是一个数组, 也就是说我们可以配置一个或者是多个路径。我们这里将这个路径设置为项目根目录中的public目录。

可能有人会有疑问，因为之前我们已经通过插件将这个目录输出到了我们输出目录。那按照刚刚的说法，我们所有输出的文件都可以直接被server也就是直接可以在浏览器端访问