Node | Node.js Webpack搭建本地服务器

️ Node.js专栏：Node.js 初级知识 Webpack搭建本地服务器
‍ 个人简介：一个不甘平庸的平凡人

✨ 个人主页：CoderHing的个人主页

格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

你的一键三连是我更新的最大动力❤️

---

目录

一、开启本地服务器

为什么要搭建本地服务器?

webpack-dev-server

二、HMR热模块替换

认识模块热替换(HMR)

开启HMR

框架的HMR

三、devServer配置

host配置

Port  open compress

四、开发和生产环境

如果区分开发环境

入口文件解析

区分开发和生产环境配置

---

一、开启本地服务器

为什么要搭建本地服务器?

目前开发代码,运行需要有两个操作:

        一: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