webpack实现“热更新”和“热加载”(webpack3.6新增)

之前的博文有提到怎么样去实现热更新,但是居然要用到另外一个node框架（express）而且新增了一个入口（entry）两个插件（plugin）来实现，大大提高了配置的复杂度，这样其实对使用webpack的开发者来说是非常不友好的。

之后我在技术胖的博客发现，原来早在webpack3.6的时候已经推出了webpack-dev-server，而且使用非常简单：

1.安装

npm i webpack-dev-server -D

2.配置webpack.config.js(可以跳过不配值)

//省略一堆配置...
devServer:{
    host: 'localhost', //可选，ip
    port: 3000, //可选，端口
    contentBase:path.resolve(__dirname,'dist'), //可选，基本目录结构
    compress: true //可选，压缩
}

3.在package.json的script添加

webpack-dev-server不能直接在cmd使用，要通过npm run才能使用，因为npm run才会找到当前目录的安装的包，直接是找不到的（这也是为什么我们之前需要全局安装gulp和webpack的原因，其实只是偷懒想在cmd直接跑webpack和gulp命令罢了）

"scripts":{
    "server": "webpack-dev-server"
}

4.跑起来（如果没有配置，默认为localhost:8080）

npm run server

如果忽略掉可有可无的第二步，其实就是简简单单的安装和使用而已，甚至还不需要配置服务器，比起之前的做法实在简单太多了。

---

 

调试：需要有浏览器调试的话，在webpack.config.js加上

devtool:'eval-source-map'

就行了

---

关于hot-update.js

其实webpack有watch功能，当我们打包范围内的文件被修改的时候，webpack是能够检测到的，并马上进行重新打包，而为了快速完成打包，webpack会生成hot-update.js和hot-update.json文件来快速替换buddle.js的对应被修改的模块。

而我们之前都在使用webpack-dev-server,这个其实只能满足初期开发，到了后期开发我们是需要和后端合并在同一个服务器的（前端使用服务器返回静态文件的功能，后端使用服务器接口返回动态数据的功能），而其他一般服务器并没用像webpack-dev-server一样使用“memory-fileSystem(内存文件系统)”，所以我们只能实时更新打包到真实的文件上，所以在对接后端的环节上，我们只能用webpack:watch的功能，这样的热更新显然会比之前使用webpack-dev-server要慢上一些，但是webpack的watch使用hot-update.js这种替换更新的方式显然使得热更新也不会太慢。

---

 

当然想要在开发期间，前端用自己的服务器，不和后端共用一个服务器也是有办法的，就是使用代理proxy

1.express有一个“http-proxy-middleware”的中间件，可以让我们的express服务器充当代理

2.webpack-dev-server也可以配置代理：

devServer: {
    //省略其他设置。。。
    代理
    proxy: {
        '/api': {
            target: 'http://localhost:8081',
            pathRewrite: {'^/api': '/data'} //本来是反向代理去http://localhost:8081/api，rewrite之后就反向代理去http://localhost:8081/data
        }
    }
} 

 

代理可以使得服务器既可以访问本地服务器的静态文件，又可以作为中转站替我们访问后端接口。