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

注意到以上代码，热替换需要与inline模式一起使用，另外需要指定output.publicPath值。

HotModuleReplacementPlugin

配置好后还需要使用webpack.HotModuleReplacementPlugin插件，才能真正启用热替换功能：

  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

同样的，热替换可以搭配Node.js服务一起使用，之后介绍。

如图，为每个文件(app.js, test.js)都实现了HMR热替换，当发生变更时，只更新变更模块，而不是重新加载所有文件：

拥抱ES6

ES6推出以来，广受Jser们青睐，其确实有很多新特性和新规范，值得我们深入学习并使用，未来所有的JavaScript应用都应该拥抱ES6，不过，目前各大浏览器都在推进ES6的实现，在兼容实现之前，我们还需要过渡性的将其转换成ES5语法，最通用的方式就是使用babel转换。

使用BABEL加载器

首先，为了能使用webpack和babel转换js代码，需要使用babel-loader加载器，另外还需要安装babel转换js的转换规则插件，如babel-preset-es2015定义了转换规则，安装方式如下：

npm install --save-dev babel-loader babel-preset-es2015

然后在根目录下创建.babelrc文件，内容：

  {
    "presets": ["es2015"]
  }

在webpack.config.js配置文件中，添加相关loader配置：

  module: {
    loaders: [
      {
        test: /\.(js|vue)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }

其中，test匹配需要转换的文件，exclude匹配不需要转换的文件或目录。

BABEL-POLYFILL

我们需要明白的一点是babel-preset-es2015能做的，只是转换ES6代码成ES5，使得浏览器可以解析执行，但是对于ES6新提出的API，如Promise，Generator等无法简单的转换成ES5代码，这时就需要babel-polyfill了，babel-polyfill是一个垫片，它可以模拟提供所有的ES6功能和特性，可以看作是提供了一个模拟的全局ES6环境。

安装

安装依然很简单，由于是垫片，是需要在源码中使用的，所有指定--save参数：

npm install --save babel-polyfill

使用

不同于babel-preset-es2015，babel-polyfill需要直接打包进源码，而且需要在使用ES6代码前引入一次：

import 'babel-polyfill'