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

最终的结构目录如下：

webpack热更新和常见错误处理

时间:2016-11-03 10:50:54 地址:https://github.com/zhongxia245/blog/issues/45 webpack热更新 一.要求 局部刷新修改的地方 二. ...

[转] webpack热更新配置小结

webpack热更新配置 热更新,可以使开发的人在修改代码后,不用刷新浏览器即可以看到修改后的效果.而它的另一个好处则是可以只替换修改部分相关的代码,大大的缩短了构建的时间. 热更新一般会涉及到两种场 ...

koa和egg项目webpack热更新实现

背景 在用Node.js+Webpack构建的方式进行开发时, 我们希望能实现修改代码能实时刷新页面UI的效果. 这个特性webpack本身是支持的, 而且基于koa也有现成的koa-webpack- ...

webpack热更新实现