情景描述
- 项目开发环境使用的是这一段脚本进行服务的启动
"start": "webpack-dev-server --config webpack.config.js --progress --inline --colors --port 1337 --host 0.0.0.0" - 使用了webpack-dev-server工具
- 并在webpack.config.js文件中配置了如下的内容
devServer: {
publicPath: '/',
hot: true,
historyApiFallback: true,
proxy: {
"^/webapi/**": {
target: process.env.TARGET || 'http://dev.hlp.fun:80',
changeOrigin: true,
}
},
contentBase: path.join(__dirname, 'app/build'),
stats: "errors-only"
}
模块热替换（Hot Module Replace）
- 每次修改某一个js文件
- 不会导致组件的重新挂载而只是重新渲染被修改的组件
- 而且app中的state或者说store（也可以说是前端的数据库部分）中的数据不会被清空或者重置
- 类似于react的diff算法重新render页面中变化的部分
- Webpack有一个很实用的功能叫做热替换（Hot-replace），尤其是结合React Hot Loader插件，开发过程中都不需要刷新浏览器，任何前端代码的更改都会实时的在浏览器中表现出来。
webpack-dev-server
为什么需要使用webpack-dev-server？
为了启动一个前端服务器处理静态资源
- 在production环境中
- 我们通过将所有的前端文件打包之后放到静态服务器上，然后浏览器访问静态服务器才能获取静态资源
- 在dev环境中
- 除了后端提供api的服务器，前端并没有一个服务器充当静态服务器的作用，用来处理浏览器请求静态资源的请求。
- 因此webpack-dev-server出现，充当静态资源的服务器，为浏览器处理静态资源的请求
如何配置这个静态资源服务器
devServer: {
publicPath: '/', //静态资源的根路径
port: 1337, //webpack-dev-server服务器启动的端口
host: 0.0.0.0, //webpack-dev-server服务器启动的host
contentBase: path.join(__dirname, 'app/build') //不是很清楚，但是总觉这个属性应该适合热替换有关，应该是服务器监听的资源的目录
}
为了解决打包速度对性能的影响
- 使用wepack --watch：
— 监听资源文件- 一旦文件变化，即刻重新编译打包生成新的bundle，然后输出在出口目录下
- 文件多了，一次打包的速度就会变慢，每次修改都重新打包，会大大降低速度
- 无法实现热替换功能，只能在页面打包好了之后手动刷新重新挂载页面上的所有组件
- 使用webpack-dev-server
- 可以监听资源文件
- 文件改变之后进行自动的编译，编译后的文件直接存放在内存中，而不会放在出口目录中，所有的文件都是使用的内存文件系统，一旦发生修改，就会直接和dev-server通信，处理速度大大提升
- 拥有热替换的配置hot一旦设置为true，就会自动的进行diff，将页面中修改的部分重新渲染，没有修改的部分不会被刷新，不会像直接刷新也页面那样带来一堆无用的重新挂载
可以提供热替换功能
- 使用wepack --watch：
- 无法实现热替换功能，只能在页面打包好了之后手动刷新重新挂载页面上的所有组件
- 使用webpack-dev-server
- 拥有热替换的配置hot一旦设置为true，就会自动的进行diff，将页面中修改的部分重新渲染，没有修改的部分不会被刷新，不会像直接刷新页面那样带来一堆无用的重新挂载
devServer: {
hot: true
}
可以提供热加载功能
- 使用webpack-dev-server
- 拥有热加载的配置inline设置为true，文件一旦修改，页面就会自动的刷新，请注意是整个页面的重新load
可以配置双服务器
- 使用proxy：主要由于webpack-dev-server是一个很小的服务器只能做到静态服务器的作用
devServer: {
proxy: {
"^/webapi/**": {
target: process.env.TARGET || 'http://dev.hlp.fun:80',
changeOrigin: true,
}
}
}
inline和hot区别(直接摘抄)
// 1. 不会刷新浏览器
$ webpack-dev-server
//2. 刷新浏览器
$ webpack-dev-server --inline
//3. 重新加载改变的部分，不会刷新页面
$ webpack-dev-server --hot
//4. 重新加载改变的部分，HRM失败则刷新页面
$ webpack-dev-server --inline --hot
只有热加载可以成功，但是热替换的功能一致没有尝试成功，下篇简书来好好研究一下热替换
