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

注：如下教程均在 windows 环境实现，使用其余操做系统的同窗实践过程可能会有些出入。

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

1、上期回顾

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

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

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

  咱们在项目开发过程当中通常须要经历三个环境：开发环境、测试环境和生产环境。

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

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

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

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

3、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；

4、webpack --watch

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

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

  如今让咱们修改当前目录的 index.js 文件，将弹窗内的 'Hello world!' 信息修改成 'Hello webpack!' 并保存：

index.js

  控制台信息输出以下：

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

5、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

  从控制台信息能够看出 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 文件的建立过程：

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 并打开浏览器：

  服务启动正常。如今咱们修改 index.js 文件的弹窗信息为 'Hello webpack-dev-server!'，能够看到控制台中 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 生成过程）

6、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），能够发现服务正常启动了。

7、使用 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'：
   

8、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 服务器自动编译，可是浏览器不会自动刷新，手动刷新浏览器，更新成功：
   

9、webpack-dev-middleware 优化

  上一节的 express 服务器能够实现自动编译的功能，可是没法自动从新加载界面，排查问题产生的缘由。
  Google 查找问题，解释以下：

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

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