Webpack开发环境配置

本章讲解Webpack开发环境的配置。

之前章节里的例子，都是通过执行npx webpack命令完成一次打包后，在本地一个HTML文件里引入打包后的资源，然后在浏览器打开这个个HTML文件来观察打包后的效果。这种方式更接近于生产环境的打包。

在我们平时的开发工作中，如果每次修改代码后，都要执行npx webpack然后手动刷新浏览器，那势必会严重影响我们的开发效率。

因此我们需要一些提高开发效率的机制，例如，修改代码后不需要手动执行构建命令而是会进行自动构建，重新构建后也不需要手动刷新浏览器而是会自动刷新等等。

其实，Webpack本身已经提供了上面所述的自动构建功能，它需要使用Webpack的监听模式，而监听模式默认是不开启的。在我们开启Webpack监听模式后，修改代码保存的那一刻，Webpack会监测到，然后自动执行构建。

除了使用Webpack自身的监听模式，我们在日常开发中更常用的是webpack-dev-server这个开发工具，Webpack社区给其命名叫做DevServer。webpack-dev-server是一个npm包，在我们安装后通过在Webpack配置文件里增加与entry和output等同级的devServer配置项，即可开启DevServer的功能。

DevServer除了支持文件监听和浏览器自动刷新外，还可以做到模块热替换，这是一个非常高效的功能。

DevServer开启了一个本地HTTP服务器，一来可以请求处理和转发，二是就不需要使用本地文件预览了。

DevServer还支持Source Map，在本地开发的时候，非常方便调试工作。

webpack-dev-server其实是基于webpack-dev-middleware和Express的，如果想要更灵活的本地开发环境配置，也可以使用webpack-dev-middleware。

除了webpack-dev-server等工具外，本章的重点内容也包括开发环境的入口entry与出口output该如何配置，该使用哪些loader与plugin以及这些loader与plugin该如何配置等。

对于开发环境该如何优化的内容，在撰写本章的时候考虑放到另外一章来撰写，因为有一些前置内容需要讲解。本章的主要目的还是讲解配置基本的本地开发环境。

对于样式处理以及手工配置一个Vue的开发环境，会以一些实例内容进行讲解。

希望通过本章的内容，读者可以对掌握基本的Webpack开发环境搭建。