webpack 热更新

1.安装webpack

　　npm install webpack -g  //全局安装

　　npm install webpack --save-dev  //开发环境

2.使用webpack

　　创建一个webpack.config.js文件，这个文件是webpack的配置文件。该文件配置主要分为：entry,output,module

　　这里就不过多的赘述webpack的基本使用了

　　文件目录如下：

　　　　　　

webpack.config.js基本配置：

　　　　　　

package.json配置：

　　　　　　

name 和 version是必须的。通过--save-dev安装的依赖就会添加到devDependencies中，通过--save安装的依赖就会添加到dependencies中，scripts是用来执行脚本命令的，可以通过npm run commanName来执行。

3.热更新

　　因为该项目用ES6，所以需要babel转换

　　安装babel：npm install babel-preset-es2015 --save-dev

　　配置.babelrc文件：{"presets": ["es2015"]}

　　到目前为止，在命令行输入：npm run build，就可以正常打开本地的index.html文件了

那么在运行npm run build命令时，到底做了写什么？

　　1.首先这个命令会去运行package.json文件里面的scripts脚本

　　2.scripts脚本首先通过babel把drag编译成.temp临时文文件

　　3.第三步是scripts会去执行webpack打包命令，该命令会去查找webpack.config.js配置文件中的entry和output，然后输出一个build/bunble.js文件

　　4.然后就在本地可以打开index.html文件了

到了这一步，只完成了一小步，因此如果我修改一个文件，我还需要手动去运行上面的那个命令，然后在刷新浏览器，才能看到更改后的效果，这样开发效率就会大大降低。这时我们需要“热更新”来帮助我们快速开发。

1）安装webpack-dev-server

　　npm install webpack-dev-server --save-dev

2)启动服务器：

　　package.json: webpack-dev-server --progress --colors也可以把该如下，写进scripts脚本。

这会绑定一个小型的express服务器到localhost:8090，来为你的静态资源及bunble（自动编译）服务。

　　通过访问localhost:8090，.temp文件没改变一次，bunble就会被重新编译。

但是到目前为止，index.html还是个本地文件，怎么生成一个服务器上的Index.html文件呢？

这时就需要使用到官方推荐的:html-webpack-plugin插件

4.html-webpack-plugin

　　1）安装html-webpack-plugin

　　npm install html-webpack-plugin --save-dev

　　2)配置html-webpack-plugin

　　webpack.config.js:

　　　　

然后打开：http://localhost:8090/index.html，就可以看到效果。

然后可以修改.temp下的文件，就可以实现热更新了。

但是到这里还有一个很大的问题没有解决，我只有通过改变babel编译后的.temp文件才能实现热更新，因为webpack的入口文件是编译后的.temp文件。那么我怎么样做，能监控到源文件变化，然后在自动执行babel转换并且重新打包呢？

5.webapck +babel

　　这时就需要把webapck和babel结合起来使用。

　　这里我使用的方法是配置webpack.config.js

　　1)把webpack.config.js文件改成webpack.config.babel.js

　　2)然后把之前通过配置.babelrc文件，并且通过scripts的babel drag --out-dir .temp 转换的方式，改成通过webpack的babel-loader去实现。

　　webpack.config.babel.js:

　　

　　然后把package.json里面的scripts命令改成：

　　　　"build": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"

然后再打开http://localhost:8090/index.html，修改源文件就实现热更新的功能了。

最终的结构目录如下：