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，修改源文件就实现热更新的功能了。

 

最终的结构目录以下：