详解webpack与SPA实践之开发环境搭建(6)

在前文webpack配置一节中提到output.publicPath属性值表示，在浏览器访问webpack output输出的文件时的基础相对路径，如设置：

  output: {
    path: 'dist/scripts',
    filename: 'app.js',
    publicPath: 'assets/'
  }

则在html文件中引用该app.js文件的方式如下：

<script src="assets/app.js"></script>

在浏览器中访问app.js的方式为：http://localhost:8080/assets/app.js

自动刷新（AUTOMATIC REFRESH）

前面说到webpack-dev-server支持文件变更时，自动刷新浏览器，这也是开发者急需的功能，webpack-dev-server支持两种方式实现：

1. iframe模式（iframe mode）：页面通过iframe窗口插入然后变更时自动重新加载；
2. inline模式（inline mode）：通过sock.js(比如websocket协议，轮询等方式)在页面嵌入一个小型客户端与webpack-dev-server服务器建立连接，当发生变更重新打包时，通过此连接通知页面重新加载；

iframe模式

使用默认的iframe模式时，不需要进行任何配置，可以直接访问：http://localhost:8080/webpack-dev-server/index.html即可，如图，通过iframe插入我们的页面：

注意：

1. 在应用页面上方会有状态栏显示当前应用信息；
2. 应用URL的变更发生在iframe内部，不会反映在浏览器地址栏；

inline模式

要开启inline模式，只需要指定--inline命令行参数或在配置文件中指定inline: true：

  devServer: {
    contentBase: './src',
    inline: true
  }

在此模式下，直接访问http://localhost:8080/index.html或http://localhost:8080即可，此模式与iframe模式的区别在于:

1. 访问URL不同；
2. 需指定inline配置参数；
3. 应用信息在控制台输出；
4. 应用URL的变更直接反映在浏览器地址栏；

其实inline模式还可以配合Node.Js服务运行，之后再介绍，这里只说明了其在HTML文档中的使用。

热替换（HOT MODULE REPLACEMENT）

除了自动刷新，webpack-dev-server的另一大卖点是模块热替换，那么热替换到底是什么？

热替换，即文件发生变更时，webpack包只替换发生变更的模块，而不需要全部替换；浏览器不需要完全重新加载，而可以直接将变更的模块注入到运行中的应用。

开启热替换功能需要指定--hot指令参数，或在配置文件中添加：

  devServer: {
    contentBase: './src',
    inline: true,
    hot: true
  }