深圳网站设计go,平顶山市城乡建设职工培训网站,广州市数商云网络科技有限公司,合肥建设集团信息网站一、为什么要搭建本地服务器#xff1f;
目前我们开发的代码#xff0c;为了运行需要有两个操作#xff1a;
操作一#xff1a;npm run build#xff0c;编译相关的代码#xff1b;操作二#xff1a;通过live server或者直接通过浏览器#xff0c;打开index.html代码…一、为什么要搭建本地服务器
目前我们开发的代码为了运行需要有两个操作
操作一npm run build编译相关的代码操作二通过live server或者直接通过浏览器打开index.html代码查看效果 这个过程经常操作会影响我们的开发效率我们希望可以做到当文件发生变化时可以自动的完成 编译 和 展示 为了完成自动编译webpack提供了几种可选的方式 webpack watch modewebpack-dev-server常用webpack-dev-middleware 二、webpack-dev-server
上面的方式可以监听到文件的变化但是事实上它本身是没有自动刷新浏览器的功能的
当然目前我们可以在VSCode中使用live-server来完成这样的功能但是我们希望在不适用live-server的情况下可以具备live reloading实时重新加载的功能
安装webpack-dev-server npm install webpack-dev-server -D
修改package.json配置文件启动时加上serve参数 webpack-dev-server 在编译之后不会写入到任何输出文件而是将 bundle 文件保留在内存中
事实上webpack-dev-server使用了一个库叫memfsmemory-fs webpack自己写的
但是现在我们发现我们只改了一个模块的代码但是他会刷新整个页面我们可不可以做到只替换当前模块当然可以就是下面我们要讲的模块热替换HMR。 三、认识模块热替换HMR
什么是HMR呢
HMR的全称是Hot Module Replacement翻译为模块热替换模块热替换是指在 应用程序运行过程中替换、添加、删除模块而无需重新刷新整个页面 HMR通过如下几种方式来提高开发的速度 不重新加载整个页面这样可以保留某些应用程序的状态不丢失只更新需要变化的内容节省开发的时间修改了css、js源代码会立即在浏览器更新相当于直接在浏览器的devtools中直接修改样式 如何使用HMR呢 默认情况下webpack-dev-server已经支持HMR我们只需要开启即可默认已经开启在不开启HMR的情况下当我们修改了源代码之后整个页面会自动刷新使用的是live reloading 四、开启HMR
修改webpack的配置 浏览器能够看到打开后的效果 但是目前还是整个页面都刷新所以我还得配置我们需要去指定哪些模块发生更新时进行HMR 但是有同学不是更有疑惑吗如果我要配多个模块去HMR的话是不是配起来很麻烦那就是下面我们要讲的内容 框架的HMR。 五、框架的HMR了解框架都默认配置好了
有一个问题在开发其他项目时我们是否需要经常手动去写入 module.hot.accpet相关的API呢
比如开发Vue、React项目我们修改了组件希望进行热更新这个时候应该如何去操作呢 事实上社区已经针对这些有很成熟的解决方案了 比如vue开发中我们使用vue-loader此loader支持vue组件的HMR提供开箱即用的体验 比如react开发中有React Hot Loader实时调整react组件目前React官方已经弃用了改成使用react-refresh 六、host配置了解
如果我这里host设置的0.0.0.0其他小伙伴就可以通过ip:端口号访问我的主机。
我的主机ip是192.168.1.90设置的端口号是8888本地打开服务后其他小伙伴就能通过浏览器上192.168.1.90:8888访问。 七、port、open、compress
port: 设置监听的端口默认情况下是8080
open: 是否打开浏览器
默认值是false设置为true会打开浏览器也可以设置为类似于 Google Chrome等值
compress: 是否为静态文件开启gzip压缩 compression
默认值是false可以设置为true 八、ProxyVue项目学习
proxy是我们开发中非常常用的一个配置选项它的目的设置代理来解决跨域访问的问题
比如我们的一个api请求是 http://localhost:8888但是本地启动服务器的域名是 http://localhost:8000这个时候发送网络请求就会出现跨域的问题那么我们可以将请求先发送到一个代理服务器代理服务器和API服务器没有跨域的问题就可以解决我们的跨域问题了 我们可以进行如下的设置 target表示的是代理到的目标地址比如 /api-hy/moment会被代理到 http://localhost:8888/api-hy/momentpathRewrite默认情况下我们的 /api-hy 也会被写入到URL中如果希望删除可以使用pathRewritesecure默认情况下不接收转发到https的服务器上如果希望支持可以设置为falsechangeOrigin它表示是否更新代理后请求的headers中host地址 九、changeOrigin的解析Vue项目学习
这个 changeOrigin官方说的非常模糊通过查看源码我发现其实是要修改代理请求中的headers中的host属性 因为我们真实的请求其实是需要通过 http://localhost:8888来请求的 但是因为使用了代理默认情况下它的值时 http://localhost:8000 如果我们需要修改那么可以将changeOrigin设置为true即可 十、historyApiFallback Vue项目学习
historyApiFallback是开发中一个非常常见的属性它主要的作用是解决SPA页面在路由跳转之后进行页面刷新时返回404 的错误。 boolean值默认是false 如果设置为true那么在刷新时返回404错误时会自动返回 index.html 的内容 object类型的值可以配置rewrites属性 可以配置from来匹配路径决定要跳转到哪一个页面 事实上devServer中实现historyApiFallback功能是通过connect-history-api-fallback库的 可以查看connect-history-api-fallback 文档 十一、如何区分开发环境
目前我们所有的webpack配置信息都是放到一个配置文件中的webpack.config.js 当配置越来越多时这个文件会变得越来越不容易维护 并且 某些配置是在开发环境需要使用 的 某些配置是在生成环境需要使用 的当然 某些配置是在开发和生成环境都会使用 的 所以我们最好 对配置进行划分 方便我们维护和管理 那么在启动时如何可以区分不同的配置呢 方案一编写两个不同的配置文件开发和生成时分别加载不同的配置文件即可 方式二使用相同的一个入口配置文件通过设置参数来区分它们 十二、入口文件解析
我们之前编写入口文件的规则是这样的./src/index.js但是如果我们的配置文件所在的位置变成了 config 目录我们是否应该变成 ../src/index.js呢 如果我们这样编写会发现是报错的依然要写成 ./src/index.js 这是因为入口文件其实是和另一个属性时有关的 context context的作用是用于解析入口entry point和加载器loader 官方说法默认是当前路径但是经过我测试默认应该是webpack的启动目录 另外推荐在配置中传入一个值 十三、区分开发和生成环境配置
这里我们创建三个文件 webpack.comm.conf.js webpack.dev.conf.js webpack.prod.conf.js
我们此时把公共的配置单独抽出来了但是我们在dev缺少了公共配置我这个时候去 npm run serve是不是肯定会报错。
问题来了我们怎么办才能把公共配置文件里的配置和webpack.dev.conf.js合并
1webpack-merge
我们先下载 webpack-merge
npm install webpack-merge -D
