webpack 项目构建：（三）开发环境——本地服务器搭建

摘要：上一章我们了解了的编译环境搭建项目构建二编译环境搭建这一章我们会结合的，介绍本地测试服务器的搭建过程。三开发环境有一些特性是专门用于开发环境的，可以帮助我们搭建一个更好的开发环境。我们可以通过配合使用来搭建本地服务。

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

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

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

  下面我们将扩展我们的 webpackDemo，赋予我们项目本地开发的能力。

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

开发环境是指程序员在开发软件功能、编写代码时的程序运行环境；

测试环境是开发环境到生产环境的过渡，是软件功能开发完成，在将代码正式发布到线上时进行进一步测试的环境；

生产环境是将代码打包发布到正式线上所运行的环境；

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

在开发环境需要的是提高开发效率，所以会需要错误跟踪调试、自动编译、热替换（HMR）、代理（proxy）和本地数据 Mock 等等；

测试环境需要的是模拟线上环境，所以一般是克隆一份生产环境的配置，并利用一些测试工具运行测试用例；

生产环境需要将代码提交到线上，是直接面向用户的，这就要求我们打包的代码有更小的体积、更快的加载速度，所以打包的重点是代码压缩、拆分、合并等优化操作。

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

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

错误跟踪：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 而且有最快的代码重构建速度，适合需要频繁修改代码的开发环境。

自动编译：开发过程会经常性地修改代码，如果每次修改都需要执行 webpack 打包生成文件，开发效率肯定是很低的。webpack 提供了三种方式用来实现源文件的自动编译功能：（1）webpack --watch；（2）webpack-dev-server；（3）webpack-dev-middleware；

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

  可以看到在执行了 webpack --watch 命令以后，该命令并不会马上结束，webpack 启动了一个监听服务。
  在浏览器中打开我们的 index.html 页面，过了一秒弹出 Hello world! 弹窗:

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

index.js

  控制台信息输出如下：

  可以看到 webpack 检测到了入口文件的变更并自动执行了打包工作。
  让我们刷新我们的页面，可以看到过了一秒弹出 Hello webpack! 弹窗。

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

通过 cnpm 安装模块：cnpm i --save-dev webpack-dev-server@2。（webpack-dev-server@3.1.0 只支持 webpack v4）

修改 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

  从控制台信息可以看出 webpack-dev-server 启动了一个默认端口号为 8080 的本地服务，我们可以在浏览器中输入 http://localhost:8080 查看效果：

  界面显示 Cannot GET / 找不到文件，这是因为 webpack-dev-server 会默认打开资源目录（./dist）下的 index.html 文件，但是我们的 webpack.config.js 只配置了 output 输出文件为 "./dist/test.js"，在 dist 目录下并不存在 index.html 文件。
  那么怎么在 dist 目录下生成 index.html 文件呢？我们可以使用 HtmlWebpackPlugin 完成 Html 文件的创建过程：

安装 HtmlWebpackPlugin：cnpm i --save-dev html-webpack-plugin；

在 webpack.config.js 中启用 HtmlWebpackPlugin：
webpack.config.js

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

  服务启动正常。现在我们修改 index.js 文件的弹窗信息为 "Hello webpack-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 会获取 output 的设置，并根据该设置执行 Html 生成过程）

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

自动打开浏览器：上面我们每次重启 webpack-dev-server 之后都需要手动打开浏览器并输入网址，我们可以使用 open 参数让 webpack-dev-server 启动成功后自动打开页面。在 webpackDemo 目录下启动服务：webpack-dev-server --open，可以看到页面自动打开了；

简化启动命令：加入 open 参数以后每次启动都需要输入命令 webpack-dev-server --open，命令很长，我们可以通过 package.json 的 scripts 项简化启动命令。

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

  还可以使用 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 打开网页，代码执行成功：

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

在服务器启动成功后浏览器不会自动打开；

在修改 index.js 后代码会重新编译，但是浏览器却不会刷新；

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

针对问题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，我们可以在 webpack.config.js 的 entry 属性中增加 "webpack-dev-server/client?http://localhost:8080"：

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

安装 express、webpack-dev-middleware：cnpm i --save-dev express webpack-dev-middleware@2；（webpack-dev-middleware@3.1.0 只支持 webpack v4）

新建 server.js 文件，用来配置 express 服务器：
server.js

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

执行 npm run server 启动 express 服务器；

打开浏览器输入网址 http://localhost:3000，程序运行正常；

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

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

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

  截图来自：https://blog.cloudboost.io/li...
  可以看出来，产生这个问题的原因是 webpack-dev-server 内置了热加载模块，所以能检测文件变更并自动加载页面；而 webpack-dev-middleware 只是用于处理文件的变更，并不能控制浏览器的重新加载。要实现 express 的热加载功能，就需要用到另外一个中间件 webpack-hot-middleware，热更新的具体实现将在下一章进行介绍。

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