一、开启本地服务器
为什么要搭建本地服务器?
目前开发代码,运行需要有两个操作:
一:npm run build 编译相关的代码
二:通过live server或直接通过浏览器,打开index.html代码 查看效果;
这个过程经常操作会影响我们的开发效率,希望可以做到 当文件发生变化时 可以自动完成编译和展示
为了完成自动编译 webpack提供了几种可选方案
Webpack watch mode; Webpack-dev-server(常用); webpack-dev-middleware
webpack-dev-server
事实上它本身没有自动刷新浏览器的功能的:
目前我们可以在VSCode中使用live-server来完成这样的功能
但是 我们希望在不适用live-server的情况下,可以具备live reloading(实时重新加载)的功能
安装webpack-dev-server
JavaScript npm install webpack-dev-server -D |
修改配合文件 启动时 加上serve参数
JavaScript devServer:{}, --------------------- "serve":"webpack serve --config itcode.config.js",
webpack-dev-server在编译后不会写入任何输出文件,而是将 js文件保留到内存中
事实上 webpack-dev-server使用了一个库 叫 memfs(memory-fs webpack自己写的)
二、HMR热模块替换
认识模块热替换(HMR)
什么是HMR呢?
HMR的全称是 Hot Module Replacement 翻译为 模块热替换
模块热替换是指在应用程序运行过程中,替换 添加 删除模块 而无需重新刷新整个页面
HMR通过下面几种方式,来提高开发的速度
不重新加载整个页面 可以保留某些应用程序的状态不丢失
只更新需要变化的内容 节省开发时间
修改了css js源代码 会立即在浏览器更新 相当于直接在浏览器的devtools中直接修改样式
如何使用HMR?
默认情况下,webpack-dev-server已经支持HMR 我们只需要开启即可!(默认为开启)
在不开启HMR的情况下,当我们修改了源代码之后,整个页面都刷新 使用的是live reloading;
开启HMR
修改webpack的配置
JavaScript devServer:{ // 默认开启 hot:true }, |
但是你会发现 当我们修改了模块的代码时 依然刷新整个页面
因为 我们需要去指定哪些模块发生更新时 进行HMR.
JavaScript if (module.hot){ module.hot.accept("./utils.js",()=>{ console.log("utils更新了") }) }
框架的HMR
在开发其他项目中 我们是否需要经常手动去写入 module.hot.accpet相关的api呢?
如 vue react项目 我们修改了组件 希望进行热更新 这根时候 应该如何去操作?
社区已经针对这些有很成熟的方案了:
如 vue开发中 使用vue-loader 此loader支持vue组件的HMR提供开箱即用的体验
如react开发中 使用react hot Loader 实时调整react组件(目前React官方已经弃用了,改为react-refresh)
三、devServer配置
host配置
host设置主机地址:
默认为localhost
如果希望其他地方也可以访问 可以设置为0.0.0.0
JavaScript devServer:{ hot:true, post:"0.0.0.0", port:8888 },
localhost和0.0.0.0的区别
localhost:本质是一个域名 通常情况下 会被解析成127.0.0.1
127.0.0.1:回环地址(Loop Back Address) 表达的意思是主机自己发出去的包 直接被自己接收
正常的数据包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层;
而回环地址 ,是在 网络层 直接被获取到了 是不会经过 数据链路层和物理层的
如 我们监听127.0.0.1时 在同一个网段下的主机中 通过ip地址是不能访问的
0.0.0.0: 监听IPV4上所有的地址 再根据端口找到不同的应用程序.
如 我们监听0.0.0.0时 在同一个网段下的主机中,通过ip地址是可以访问的
Port open compress
port设置监听的端口,默认为8080
open是否打开浏览器:
默认为false 设置为true时 会打开浏览器
也可以设置为类似于Google Chrome等值
compress是否为静态文件开启gzip compression
默认为false 可以设置为true
JavaScript devServer:{ hot:true, post:"0.0.0.0", port:8888, // 自动打开 浏览器 false为关闭 open:flase, // 压缩 如果为true 会对文件进行压缩 会通过gzip进行压缩 compress:false },
四、开发和生产环境
如果区分开发环境
目前我们所有的webpack配置信息都是放到一个配置文件中: webpack.config.js
当配置越来越多时 这个文件就会越来越不易维护
且 某些配置是在开发环境需要使用的 某些配置是在生产环境需要的 当前某些环境是在开发和生产都需要使用的
所以 我们最好对配置进行划分 方便我们维护和管理
那么 再启动时 如何可以区分不同的配置呢?
一:编写两个不同的配置文件 开发和生产时 分别加载不同的配置文件即可
二:使用相同的一个入口配置文件 通过设置参数来区分它们
入口文件解析
我们之前编写入口文件的规则是这样的:./src/index.js 但是 我们的配置文件所在的位置变成了config目录 我们是否应该编程 ../src/index.js呢?
如果这样编写 会发现是报错的 依然要写成./src/index.ks
因为入口文件其实是和另一个属性是有关的 context
context的作用是用于解析入口(entry point)和加载器的(loader)
官方:默认是当前路径(经过测试 默认应该是webpack的启动目录)
另外推荐在配置中传入一个值;
JavaScript // context是配置文件所在目录 module.exports = { context:path.resolve(__dirname,"./"), entry:"../src/index.js" }
区分开发和生产环境配置
这里我们创建三个文件:
webpack.comm.conf.js webpack.dev.conf.js webpack.prod.conf.js
