admin 管理员组

文章数量: 887021

webpack

watch

  1. package.json

  2. npm run watch，启动webpack检测打包，不会退出进程，只要修改文件，会自动生成新的文件

  3. vscode插件,live-server，启动一个服务，打开html文件，借用了window.location.reload()

  4. 当修改原文件，通过webpack动态打包后，生成新的文件，liver-server刚好可以检测到文件变化，页面就刷新一下

  5. 更新这一套可以做到，然而webpack采用的是webpack-dev-server

webpack-dev-server

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

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

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

hotOnly、host配置

  1. hotOnly是当代码编译失败时，是否刷新整个页面：
    1. 默认情况下当代码编译失败修复后，我们会重新刷新整个页面；
    2. 如果不希望重新刷新整个页面，可以设置hotOnly为true；
  2. host设置主机地址：
    1. 默认值是localhost；
    2. 如果希望其他地方也可以访问，可以设置为 0.0.0.0；
  3. 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

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

webpack-dev-middleware

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

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

  1. 目录结构
  2. App.jsx
  3. App.vue
  4. index.js
  5. babel.config.js
  6. index.html
  7. package.json
  8. webpack.config.js
  9. 反向安装后yarn install
  10. 执行命令npm run serve
  11. 打开localhost:8080

本文标签： webpack

版权声明：本文标题：webpack 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1686598827h15310.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。