一、开启本地服务器

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

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

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

修改配合文件 启动时 加上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的配置

但是你会发现 当我们修改了模块的代码时 依然刷新整个页面

       因为 我们需要去指定哪些模块发生更新时 进行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