zoukankan      html  css  js  c++  java
  • Webpack实战(二):webpack-dev-server的介绍与用法

    为什么要用webpack-dev-server

    在开发中,我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后,我们需要执行npm run build命令更新js文件,然后再刷新页面,才能看到更新效果。webpack-dev-server正好解决了这个问题,是一款便捷的本地开发工具。

    webpack-dev-server 安装及配置

    用以下命令进行安装:

    npm install webpack-dev-server --save-dev
    

    --save-dev:将webpack-dev-server保存配置信息到pacjage.json的devDependencies(开发环境依赖)节点中。这样做是因为webpack-dev-server仅仅在本地开发时才会用到,在生产环境中并不需要它 。项目上线的时候,要进行依赖安装,就可以通过npm install--production过滤掉devDependencies中的冗余模块,从而加快安装和发布的速度。

    为了便捷地启动webpack-dev-server,我们在package.json中添加一个dev指令:

    "scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server --open"  //open是自动执行后打开页面
      }
    

    最后,对webpack.config.js添加一个devServer对象,它是专门用来放webpack-dev-server配置的,webpack-dev-server可以看作一个服务者,它的主要工作就是接收浏览器的请求,然后将资源返回。当服务启动时,会先让Webpack进行模块打包并将资源准备好(在示例中就是bundle.js)。当webpack-dev-server接收到浏览器的资源请求时,它会首先进行URL地址校验。如果该地址是资源服务地址(上面配置的publicPath),就会从Webpack的打包结果中寻找该资源并返回给浏览器。反之,如果请求地址不属于资源服务地址,则直接读取硬盘中的源文件并将其返回

    "devServer": {
        "publicPath": './dist',
        "port": 3000
      }
    

    这里有一点需要注意。直接用Webpack开发和使用webpack-dev-server有一个很大的区别,前者每次都会生成budnle.js,而webpack-dev-server只是将打包结果放在内存中,并不会写入实际的bundle.js,在每次webpack-dev-server接收到请求时都只是将内存中的打包结果返回给浏览器。

    webpack-dev-server还有一项很便捷的特性就是live-reloading(自动刷新)。当我们修改了内容之后,切换到浏览器你会发现,浏览器内容也变化了。

    webpack-dev-server特点:

    • 令Webpack进行模块打包,并处理打包结果的资源请求
    • 作为普通的Web Server,处理静态资源文件请求
    • 解决了来回npm run build,再更新代码的问题,比较便捷
    • 可以设置port端口和open(自动打开页面),其他更多配置可以参考官网api:https://webpack.js.org/configuration/dev-server/
    • 自动刷新:浏览器自动更改后的内容
  • 相关阅读:
    【计算机视觉】OpenCV篇(2)
    【计算机视觉】OpenCV篇(1)
    傅立叶分析与小波分析整理
    极简Python DeBug工具——PySnooper
    透过SourceTree再谈Git
    佳文赏析:How to uninstall Linux
    AI佳作解读系列(四)——数据增强篇
    AI佳作解读系列(三)——深度学习中的合成数据研究
    java基础 序列化反序列化流 实现Serializable 接口 自动装载序列号到对象文本文件如修改不能反序列化对象文本,除非自定义long型常量 打印流
    java基础IO流 复制键盘录入的目录,复制其中的.java文件到指定目录,指定目录中有重名,则改名 对加密文件计算字母个数
  • 原文地址:https://www.cnblogs.com/lfcss/p/12153144.html
Copyright © 2011-2022 走看看