Webpack5教程四:利用服务器提高开发效率

·  阅读 420
Webpack5教程四:利用服务器提高开发效率

「这是我参与2022首次更文挑战的第7天,活动详情查看:2022首次更文挑战」。

通过前面几篇文章的学习,到目前为止,我们已经学会了使用webpack进行项目的打包与演示,但你有没有发现,每次更新都需要在以下几个步骤中来回操作:

  1. 编写代码
  2. 打包
  3. 运行
  4. 浏览器查看效果

很显然,这种开发方式太过于原始,效率也极其低下,我们今天就分别通过webpack的watch监听模式和配置devServer开发服务器的方式来改变这种工作模式,从而提高我们的开发效率。

一、webpack的watch监听模式

使用这种方式最简单,只需要在执行webpack命令时添加--watch(简写:-w)参数即可:

    npx webpack --watch
复制代码

启动后命令行光标闪动,表示webpack已处于监听模式,这时只需要手打开html页面就能看到效果,当项目中的文件有修改时,webpack会自动重新打包并输出,当然,我们需要手动刷新浏览器才能看到最新效果。

这时我们就会想,能不能让webpack更智能一些、效率更高一些呢?如果Webpack重新打包后能帮我们自动刷新浏览器就好了

这个效果其实webpack已经帮我们想好了,就是使用webpack自带的开发服务器devServer配置

二、devServer开发服务器

通过devServer能在本地开发环境创建一个服务器,该服务器基于express,它能实现当项目中的代码发生改变的时,除了打包编译外,还可以帮助我们自动刷新浏览器从而实现实时展示效果,接下来说一下它的使用。

安装与配置

要使用devServer配置,必须要安装webpack-dev-server模块

    npm install webpack-dev-server
复制代码

安装后只需要在webpack.config.js配置文件中设置devSever属性即可,这里设置成一个空对象,因为devServer能实现零配置启动

    module.exports = {
        // ...
        devServer:{

        }
    }
复制代码

零配置启动服务器

devServer中不需要设置任何参数即可启动(使用默认配置),只需要在命令输出以下命令就能启动一个默认端口为8080的服务器

    # 直接通过webpack-dev-server启动
    npx webpack-dev-server

    #通过webpack CLI 启动(推荐)
    npx webpack server
复制代码

如果不想使用npx命令,也可以通过npm script脚本命令启动,需要在package.json文件中设置scripts属性,配置后就可以通过npm run dev启动服务器了,代码如下:

    //package.json
    {
        //...
        "scripts":{
            "dev":"webpack server"
        }
    }
复制代码

服务器启动后,devServer会监听着项目文件的变化,当文件有修改时自动重新打包编译,并采用HMR热替换自动刷新浏览器方式更新页面效果。但与watch模式不同,webpack为了让效率更快,这些打包操作并没生成具体的文件到磁盘中,而是在内存中完成的,所以我们并不会在实际的目录中看到打包后的文件效果。

有了devServer开发服务器,我们就可以体验一边修改代码,一边即时查看修改后结果的开发方式

配置参数

虽然可以使用devServer的默认配置来启动服务器,但要发挥devServer的强大功能,还需要去了解它的每一个参数,该模块的配置很多,大家可以通过webpack的官网自行查阅,下面列举几个常用配置选项:

  • static:指定静态资源目录(默认是 public 文件夹) 一般用来存放一些不经过webpack打包的静态资源文件(如:favicon.ico),该属性可以是String单个目录或Array多个目录(4.x老版本使用contentBase来设置)

        module.exports = {
            //...
            devServer:{
                // 4.x版本写法
                contentBase:path.resolve('./public'),
    
                // 5.x版本写法
                static:path.resolve('./public')
            }
        }
    复制代码
  • port: 指定服务器端口(默认:8080)

    这个没什么可说的,根据自己的需求指定端口,如不指定,且8080端口被占用,则会自动递增为8081,依此类推

  • hot: 是热模块替换启用(默认:true)

    开启模块热替换功能后,当监听到项目中的文件被修改时,devServer是在不刷新整个页面的情况下通过使用新模块替换旧模块来做到实时预览的,这对保持表单输入状态特别有用,如禁用该功能,就通过自动刷新整个页面来做到实时预览的,输入表单中的内容自然也会被清空

  • open: 是否自动打开浏览器(默认:false)

    懒人模式,启动devServer时自动打开浏览器

  • historyApiFallback: 是否支持history路由(默认:false)

    启用该属性后,当访问的页不存在时(404)服务器会自动响应首页的内容,这个在单页面应用(SPA)中使用history路由时特别有用

  • host

    默认情况下,只有本机才能访问devServer服务器,通过设置host0.0.0.0让局域网其它设备也能访问

  • compress: 启动gzip服务器压缩

    设置后可以提高页面访问速度

  • proxy: 服务器代理(一般用于解决ajax跨域问题)

    基于http-proxy-middleware的代理服务器

    工作中经常有这样的场景,后端接口工作在http://10.3.131.2:3000服务器上,自己使用webpack启动的服务器为http://localhost:8080,当在代码中发起ajax请求时就产生了跨域限制,后端接口如果没有开户CORS跨域资源共享,默认是无法直接访问的,这时代理就非常有用,在webpack-dev-server中设置代理非常简单,代理如下:

        module.exports = {
        //...
        devServer: {
            proxy: {
                '/api': 'http://10.3.131.2:3000',
                },
            },
        };
    复制代码

    当ajax请求地址以/api开头时,就会进入代理服务器,如:以下请求地址虽然是http://localhost:8080/api/users,但由于地址是以/api开头,所以在devServer服务器内部会自动向http://10.3.131.2:3000发起请求

        const xhr = new XMLHttpRequest()
        xhr.open('get','http://localhost:8080/api/users',true)
        xhr.send()
    复制代码

    代理还有多种写法,以实现不同的需求,如当目标接口地址没有/api时:

    • 请求地址:http://localhost:8080/api/users
    • 接口地址:http://10.3.131.2:3000/users

    这时/api仅仅是为了匹配代理规则,但真实的接口地址是没有/api的,所以得使用pathRewrite重写路径(删除多余字符)

    另外,默认情况下代理时会保留主机头的来源(请求头中的Origin字段为http://localhost:8080),有的接口服务器可能会对Origin字符进行限制,我们可以将 changeOrigin 设置为 true 以覆盖此行为,设置后Origin字段就被覆盖为http://10.3.131.2:3000

        module.exports = {
            //...
            devServer: {
                proxy: {
                    '/api': {
                        target: 'http://10.3.131.2:3000',
                        pathRewrite: { '^/api': '' },
                        changeOrigin:true
                    },
                },
            },
        };
    复制代码

往期文章传送门

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改