注：以下教程都是在windows环境下实现的，使用其他操作系统的同学在实践过程中可能会有一些差异。上一章我们了解了webpack的ES6编译环境搭建：webpack项目搭建：(2)ES6编译环境搭建本章我们将结合webpack的webpack-dev-server来介绍搭建本地测试服务器的过程。一、上期回顾上一章，我们将Babel与webpack结合，搭建了一个可以使用ES6语法的开发构建平台。（源码下载地址：https://github.com/xh4722/web...）项目结构如下：接下来我们将扩展我们的webpackDemo，让我们的项目具备本地开发的能力。2.开发环境、测试环境和生产环境我们在项目开发过程中一般需要经历三个环境：开发环境、测试环境和生产环境。开发环境是指程序员开发软件功能和编写代码时的程序运行环境；测试环境是从开发环境过渡到生产环境，是软件功能开发好，代码正式上线后进一步测试的环境。;生产环境是代码打包发布到正式线上的环境；不同的环境有不同的使用场景，对我们的webpack配置的要求也会不同。开发环境中需要的是提高开发效率，所以需要错误跟踪调试、自动编译、热替换（HMR）、代理（proxy）和本地数据Mock等；测试环境需要模拟线上环境，所以一般会Clone一个生产环境的配置，使用一些测试工具跑测试用例；生产环境需要将代码提交到线上，直接面向用户，这就要求我们打包后的代码体积更小，加载速度更快，所以打包的重点是代码压缩、拆分、合并等优化操作.下面就从开发环境入手，一步步搭建一个高效的webpack开发环境。3、webpack开发环境webpack有一些专门用于开发环境的特性，可以帮助我们搭建更好的开发环境。错误跟踪：webpack打包后的代码经过重新排列和组织，很难定位代码错误的位置。Javascript提供了sourcemap功能，可以通过webpack的devtool进行配置。源映射用于将编译后的代码映射回原始代码，从而更容易追踪错误和警告。sourcemap有很多不同的选项，各个选项的作用可以在devtool中查看，这里不做说明。开发环境一般使用eval-source-map、cheap-eval-source-map或cheap-module-eval-source-map，因为这些选项提供sourcemap，代码重构速度最快，适合A开发需要频繁更改代码的环境。自动编译：代码在开发过程中会经常修改。如果每次修改都需要执行webpack打包生成文件，开发效率肯定会很低。webpack提供了三种方式来实现源文件的自动编译功能：（1）webpack--watch；(2)webpack-开发服务器；(3)webpack-dev-中间件；4.webpack--watchfirstlet我们来试试第一种自动编译的方法，在webpackDemo目录下执行webpack--watch：监控服务。在浏览器中打开我们的index.html页面，Helloworld!一秒后弹出弹窗：现在让我们修改当前目录下的index.js文件，把'Helloworld!'改成弹出窗口中的信息为“Hellowebpack!”并保存：index.js控制台信息输出如下：可以看到webpack检测到了入口文件的变化，自动执行了打包工作。让我们刷新我们的页面，看看Hellowebpack！弹出窗口在一秒钟后弹出。5.webpack-dev-serverwebpack--watch解决入口文件更改后自动编译的问题，但每次修改后需要手动刷新页面才能看到最新效果。我们可以使用webpack-dev-server来解决手动刷新的问题。webpack-dev-server提供了一个简单的web服务器，并提供了livereloading的功能。在正式使用之前，我们先做一些准备工作。通过cnpm安装模块：cnpmi--save-devwebpack-dev-server@2。（webpack-dev-server@3.1.0只支持webpackv4）修改webpack.config.js：安装webpack-dev-server后，我们需要在webpack.config.js中通过devServer配置服务启动环境。修改webpack.config.js文件如下：webpack.config.js我们修改了两个地方：（1）将output.filename改为'./dist/test.js'；(2)添加devServer并配置资源路径为输出文件'./dist'所在位置；现在让我们在当前目录执行服务启动命令：webpack-dev-server服务，我们可以在浏览器中输入http://localhost:8080查看效果：界面显示CannotGET/找不到文件，这是因为webpack-dev-server默认会打开资源目录（./dist）下的index.html文件，但是我们的webpack.config.js只配置了output输出文件为'./dist/test.js'，dist目录下没有index.html文件。那么如何在dist目录下生成index.html文件呢？我们可以使用HtmlWebpackPlugin来完成Html文件的创建过程：安装HtmlWebpackPlugin:cnpmi--save-devhtml-webpack-plugin;启用webpack.config.js中的HtmlWebpackPlugin：webpack.config.js我们在webpack.config.js中通过webpack.config.js的plugins声明并导入了HtmlWebpackPlugin。现在让我们重启webpack-dev-server并打开浏览器：服务启动正常。现在我们修改index.js文件的弹窗信息为'Hellowebpack-dev-server!'，可以看到在控制台中自动重新编译了webpack-dev-server，页面自动刷新后编译完成：现在让我们休息一下，回顾上面webpack-dev-server的构建过程，我们可以发现几个有趣的地方：在我们启动webpack-dev-server之前，我们并没有使用webpack来生成实际的./dist文件。启动服务时，我们的文件目录如下：即里面生成了webpack-dev-server使用的./dist目录。当我们在不配置任何参数的情况下使用HtmlWebpackPlugin时，它是如何在./dist目录下生成index.html文件并引用output输出的test.js文件的呢？（这里我的猜测是HtmlWebpackPlugin会获取输出设置，并根据设置执行Html生成过程）六、webpack-dev-server启动优化让我们在上面的webpack-dev-server的基础上做一些优化，所以那serverworksbetter:Openthebrowserautomatically:上面我们每次重启webpack-dev-server都需要手动打开浏览器输入url，我们可以使用open参数让webpack-dev-server打开启动成功后自动翻页。启动webpackDemo目录下的服务：webpack-dev-server--open，可以看到页面自动打开；简化启动命令：添加open参数后，每次启动都需要输入命令webpack-dev-server--open，命令很长，我们可以通过package.json的scripts项来简化启动命令.做完上面的配置后，只需要执行命令：npmsatrt（npmstart是npmrunstart的缩写，其他可以缩写的命令还有npmtest、npmstop、npmrestart），就可以发现服务已正常启动。7.使用Node.js结合webpack-dev-server也可以使用Node.jsAPI结合webpack-dev-server搭建服务器。新建一个server.js文件用于编写服务器代码：server.js在server.js中我们引入了webpack-dev-server并启动了localhost:8080服务。接下来打开我们的package.json文件，修改我们的启动命令：package.json在当前目录下执行命令：npmstart服务启动成功后，在浏览器中输入http://localhost:8080打开网页，并且代码执行成功：但是我们发现两个问题：服务器启动成功后浏览器不会自动打开；修改index.js后会重新编译代码，但浏览器不会刷新；下面我们来尝试解决这两个问题：1.我们可以引入webpack-browser-plugin来实现自动打开浏览器的功能：安装webpack-browser-plugin模块：cnpmi--save-devwebpack-browser-plugin;在webpack.config.js中使用这个插件：webpack.config.js再次执行命令npmstart，可以发现浏览器自动打开了http://localhost:8080；对于问题2，我们可以在webpack.config.js的entry属性中加入'webpack-dev-server/client'?http://localhost:8080':8.webpack-dev-middleware启动本地服务的第三种方式就是使用webpack-dev-middleware。webpack-dev-middleware是webpack-dev-server内部使用的容器，可以将webpack处理后的文件传递给服务器。我们可以使用express和webpack-dev-middleware来构建本地服务。安装express和webpack-dev-middleware:cnpmi--save-devexpresswebpack-dev-middleware@2;（webpack-dev-middleware@3.1.0只支持webpackv4）新建server.js文件配置expressServer：server.js修改package.json脚本，添加npmrunserver命令：执行npmrunserver启动express服务器;打开浏览器，输入网址http://localhost:3000，程序运行正常；修改index.js，弹出'Hellowebpack-dev-middleware!'弹出窗口;index.jsexpressserver自动编译，但是浏览器不会自动刷新，手动刷新浏览器，更新成功：九、webpack-dev-middleware优化上一节中的expressserver可以实现自动编译的功能，但是界面无法自动重载，排查问题原因。谷歌查找问题，解释如下：截图来自：https://blog.cloudboost.io/li...可以看出出现这个问题的原因是webpack-dev-server内置了-在热加载模块中，因此它可以检测文件更改并自动加载页面；而webpack-dev-middleware仅用于处理文件更改，无法控制浏览器的重新加载。要实现express的热加载功能，还需要另外一个中间件webpack-hot-middleware。热更新的具体实现将在下一章介绍。参考：AnIntroductiontoSourceMapswebpack中文文档
