注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。

  上一章我们了解了 webpack 的 ES6 编译环境搭建：webpack 项目构建：（二）ES6 编译环境搭建
  这一章我们会结合 webpack 的 webpack-dev-server，介绍本地测试服务器的搭建过程。

一、上期回顾

  上一章我们在 webpack 上结合了 Babel，搭建了一个可以使用 ES6 语法的开发构建平台。（源码下载地址：https://github.com/xh4722/web...）
  项目结构如下：

二、开发环境、测试环境和生产环境

  我们在项目开发过程中一般需要经历三个环境：开发环境、测试环境和生产环境。

1. 开发环境是指程序员在开发软件功能、编写代码时的程序运行环境；
2. 测试环境是开发环境到生产环境的过渡，是软件功能开发完成，在将代码正式发布到线上时进行进一步测试的环境；
3. 生产环境是将代码打包发布到正式线上所运行的环境；

  不同环境的使用场景不同，对我们的 webpack 配置要求也会不一样。

1. 在开发环境需要的是提高开发效率，所以会需要错误跟踪调试、自动编译、热替换（HMR）、代理（Proxy）和本地数据 Mock 等等；
2. 测试环境需要的是模拟线上环境，所以一般是克隆一份生产环境的配置，并利用一些测试工具运行测试用例；
3. 生产环境需要将代码提交到线上，是直接面向用户的，这就要求我们打包的代码有更小的体积、更快的加载速度，所以打包的重点是代码压缩、拆分、合并等优化操作。

  我们先从开发环境入手，一步步搭建一个高效的 webpack 开发环境。

三、webpack 开发环境

  webpack 有一些特性是专门用于开发环境的，可以帮助我们搭建一个更好的开发环境。

1. 错误跟踪：webpack 打包后的代码是经过重新整理和组织的，这就会造成代码出错的位置很难定位。Javascript 提供了 source map 功能，通过 webpack 的 devtool 可以进行配置。source map 用于将编译后的代码映射回原始代码，可以更容易地追踪错误和警告。source map 有很多不同的选项,每个选项的作用可以在 devtool 中查看，这里不做说明。一般在开发环境会使用 eval-source-map、cheap-eval-source-map 或者 cheap-module-eval-source-map，因为这几个选项提供了 source map 而且有最快的代码重构建速度，适合需要频繁修改代码的开发环境。
2. 自动编译：开发过程会经常性地修改代码，如果每次修改都需要执行 webpack 打包生成文件，开发效率肯定是很低的。webpack 提供了三种方式用来实现源文件的自动编译功能：（1）webpack --watch；（2）webpack-dev-server；（3）webpack-dev-middleware；

四、webpack --watch

  先让我们试用一下自动编译的第一种方式，在 webpackDemo 的目录下执行 webpack --watch：

  现在让我们修改当前目录的 index.js 文件，将弹窗内的 'Hello world!' 信息修改为 'Hello webpack!' 并保存：

index.js

  控制台信息输出如下：

五、webpack-dev-server

  webpack --watch 解决了入口文件变更后自动编译的问题，但是每次修改以后都需要手动刷新页面才能看到最新的效果。我们可以使用 webpack-dev-server 解决手动刷新的问题。
  webpack-dev-server 提供了一个简单的 web 服务器，并提供了实时加载（live reloading）的功能。在正式使用前我们先做一些准备工作。

1. 通过 cnpm 安装模块：cnpm i --save-dev webpack-dev-server@2。（webpack-dev-server@3.1.0 只支持 webpack v4）
2. 修改 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

1. 安装 HtmlWebpackPlugin：cnpm i --save-dev html-webpack-plugin；
2. 在 webpack.config.js 中启用 HtmlWebpackPlugin：
   webpack.config.js
   

   

  我们在 webpack.config.js 中声明了 HtmlWebpackPlugin，并通过 webpack.config.js 的 plugins 引入该插件。
  现在让我们重新启动 webpack-dev-server 并打开浏览器：

  现在让我们稍微休息一下，回顾一下上面 webpack-dev-server 的搭建过程，可以发现几个比较有意思的地方：

1. 在我们启动 webpack-dev-server 之前，我们并没用通过 webpack 生成实际的 ./dist 文件。在启动服务时，我们的文件目录如下：
   

   

   
   也就是说 webpack-dev-server 使用的 ./dist 目录是在它内部生成的。
2. 我们在使用 HtmlWebpackPlugin 时没有配置任何参数，它又是怎么在 ./dist 目录下生成 index.html 文件，并引用 output 输出的 test.js 文件的呢？（我这边大概的猜测是 HtmlWebpackPlugin 会获取 output 的设置，并根据该设置执行 Html 生成过程）

六、webpack-dev-server 启动优化

  让我们在上面的 webpack-dev-server 基础上做一些优化，让服务器工作得更好：

1. 自动打开浏览器：上面我们每次重启 webpack-dev-server 之后都需要手动打开浏览器并输入网址，我们可以使用 open 参数让 webpack-dev-server 启动成功后自动打开页面。在 webpackDemo 目录下启动服务：webpack-dev-server --open，可以看到页面自动打开了；
2. 简化启动命令：加入 oPEn 参数以后每次启动都需要输入命令 webpack-dev-server --open，命令很长，我们可以通过 package.JSON 的 scripts 项简化启动命令。
   

   

   
   做了如上配置以后，只需要执行命令：npm satrt（npm start 是 npm run start 的简写，其他可以简写的命令还有 npm test、npm stop、npm restart），可以发现服务正常启动了。

七、使用 Node.js 结合 webpack-dev-server

  还可以使用 Node.js API 结合 webpack-dev-server 构建服务器。新建一个 server.js 文件，用于编写服务器代码：

server.js

  在 server.js 里我们引入了 webpack-dev-server，并启动了 localhost:8080 服务。
  接下来打开我们的 package.json 文件，修改我们的启动命令：
package.json

  在当前目录执行命令：npm start
  服务启动成功后在浏览器中输入 http://localhost:8080 打开网页，代码执行成功：

  但是我们发现有两个问题：

1. 在服务器启动成功后浏览器不会自动打开；
2. 在修改 index.js 后代码会重新编译，但是浏览器却不会刷新；

  让我们尝试解决这两个问题：

1. 针对问题1，我们可以引入 webpack-browser-plugin 实现自动打开浏览器的功能：

   • 安装 webpack-browser-plugin 模块：cnpm i --save-dev webpack-browser-plugin；
   • 在 webpack.config.js 中使用该插件：
     webpack.config.js
     

     

   • 再次执行命令 npm start，可以发现浏览器自动打开 http://localhost:8080；
2. 针对问题2，我们可以在 webpack.config.js 的 entry 属性中增加 'webpack-dev-server/client?http://localhost:8080'：
   

   

八、webpack-dev-middleware

  第三种启动本地服务的方式是使用 webpack-dev-middleware。webpack-dev-middleware 是 webpack-dev-server 内部使用的一个容器，可以把 webpack 处理后的文件传递给一个服务器。我们可以通过 exPress 配合使用 webpack-dev-middleware 来搭建本地服务。

1. 安装 exPRess、webpack-dev-middleware：cnpm i --save-dev express webpack-dev-middleware@2；（webpack-dev-middleware@3.1.0 只支持 webpack v4）
2. 新建 server.js 文件，用来配置 express 服务器：
   server.js
   

   

3. 修改 package.json scripts，增加 npm run server 命令：
   

   

4. 执行 npm run server 启动 express 服务器；
5. 打开浏览器输入网址 http://localhost:3000，程序运行正常；
   

   

6. 修改 index.js，弹出 'Hello webpack-dev-middleware!' 弹窗；
   index.js
   

   

7. express 服务器自动编译，但是浏览器不会自动刷新，手动刷新浏览器，更新成功：
   

   

九、webpack-dev-middleware 优化

  上一节的 express 服务器可以实现自动编译的功能，但是无法自动重新加载界面，排查问题产生的原因。
  GOOGLE 查找问题，解释如下：

参考资料：
An Introduction to Source Maps
webpack 中文文档