webpack json配置文件使用以及热更新

在实际工作中，我们的项目都会配置一个Json的文件或者说API文件，作为项目的配置文件。有时候你也会从后台读取到一个json的文件，这节课就学习如何在webpack环境中使用Json。如果你会webpack1或者webpack2版本中，你是需要加载一个json-loader的loader进来的，但是在webpack3.x版本中，你不再需要另外引入了。

读出Json内容

第一步：现在我们的index.html模板中加入一个层，并给层一个Id，为了是在javascript代码中可以方便引用。

//index.html

第二步：到src文件夹下，找到入口文件，我这里是entry.js文件。修改里边的代码，如下：

//entry.js
let json =require('../config.json');
document.getElementById("json").innerHTML= json.name;

这两行代码非常简单，第一行是引入我们的json文件，第二行驶写入到到DOM中。

第三部：启用我们的npm run server 命令就可以在浏览器中看到结果了。

说说热更新

其实在webpack3中启用热加载相当的容易，只要加入HotModuleReplacementPlugin这个插件就可以了。

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

现在只要你启动 npm run server 后，修改index.html中的内容，浏览器可以自动给我们更新出最新的页面。

但这里说的热加更新和我们平时写程序的热加载不是一回事，比如说我们Vue或者React中的热更新，并不是刷新整个页面，而是一个局部更新，而这里的更新是重新刷新了页面。