watch

package.json
npm run watch，启动webpack检测打包，不会退出进程，只要修改文件，会自动生成新的文件
vscode插件,live-server，启动一个服务，打开html文件，借用了window.location.reload()
当修改原文件，通过webpack动态打包后，生成新的文件，liver-server刚好可以检测到文件变化，页面就刷新一下
更新这一套可以做到，然而webpack采用的是webpack-dev-server

webpack-dev-server

webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，事实上webpack-dev-server使用了一个库叫memory-fs webpack
模块热替换是指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可；

但是如果要热更新math.js文件，需要写如下代码：

如果没有写上面红色框的代码，那么修改math.js文件，会刷新整个网页
修改了index.html文件后，如果加了上面红色框代码，那么修改math.js文件，页面是不会看到index.html更新后的内容，但是js可以看到修改后执行的代码，相反如果加，那么会刷新整个页面代码

hotOnly、host配置

hotOnly是当代码编译失败时，是否刷新整个页面：
1. 默认情况下当代码编译失败修复后，我们会重新刷新整个页面；
2. 如果不希望重新刷新整个页面，可以设置hotOnly为true；
host设置主机地址：
1. 默认值是localhost；
2. 如果希望其他地方也可以访问，可以设置为 0.0.0.0；
localhost 和 0.0.0.0 的区别：
1. localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1;
2. 127.0.0.1：回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收;
  1. 正常的数据库包经常应用层 - 传输层 - 网络层 - 数据链路层 - 物理层 ;
  2. 而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的;
  3. 比如我们监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的;
3. 0.0.0.0：监听IPV4上所有的地址，再根据端口找到不同的应用程序;
  1. 比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的;

historyApiFallback

historyApiFallback是开发中一个非常常见的属性，它主要的作用是解决SPA页面在路由跳转之后，进行页面刷新时，返回404的错误。
默认是false，如果设置为true，那么在刷新网页返回404错误时，会自动跳转到index.html
如果设置为object类型，可以配置rewrites属性：

webpack-dev-middleware

server.js
webpack.config.js
随便写一个入口js文件
node server.js，启动服务localhost:3000
在浏览器中打开，就可以看到js代码在控制台中打印的结果
很不好的是，我们修改了入口js文件内容，需要刷新页面才能看到新的结果。

加载vue和react文件，且热更新

目录结构
App.jsx
App.vue
index.js
babel.config.js
index.html
package.json
webpack.config.js
反向安装后yarn install
执行命令npm run serve
打开localhost:8080

webpack-dev-server(devServer)相关推荐

WEBPACK DEV SERVER
文/tsyeyuanfeng(简书作者) 原文链接:http://www.jianshu.com/p/941bfaf13be1# 著作权归作者所有,转载请联系作者获得授权,并标注"简书作者& ...
webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中webpack.dev.conf.jsconst axios = require('axios') co ...
Invalid options object. Dev Server has been initialized using an options object
启动webpack报错: [webpack-cli] Invalid options object. Dev Server has been initialized using an options ...
Invalid options object. Dev Server has been initialized using an options object that does not match
Invalid options object. Dev Server has been initialized using an options object that does not match ...
Webstorm中提示Cannot find module 'webpack.dev.conf.js'
问题描述: 在Webstorm中运行cordova项目时,提示: Cannot find module 'webpack.dev.conf.js' 先不要着急删掉node_modules,然后重新np ...
Vue运行报错webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
vue 项目 npm run dev 运行时报错: npm ERR! xxx@1.0.0 dev: `webpack-dev-server --inline --progress --config b ...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置安装 axios ...
ValidationError: Invalid options object. Dev Server has been initialized using an options object th
ValidationError: Invalid options object. Dev Server has been initialized using an options object tha ...
vue:hadoop@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
运行vue项目是报错: hadoop@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.con ...

webpack-dev-server(devServer)

watch

webpack-dev-server

hotOnly、host配置

historyApiFallback

webpack-dev-middleware

加载vue和react文件，且热更新

webpack-dev-server(devServer)相关推荐

最新文章

热门文章