Webpack4 配置 DevServer 本地服务器_LiuJun2Son的博客-程序员秘密_devserver

技术标签: webpack  构建工具  

前面的已经介绍过如何用webpack 打包一个项目,细心的人会发现,打包后想要项目运行起来必须要把打包后的项目上传到服务器中,或者静态的项目也可以在本地直接用浏览器打开。但在实际开发中可能会需要实时预览界面效果,那么这个时候就需要创建一个本地的HTTP服务器来实现实时预览项目。

然而官方提供的开发工具 DevServer 也可以很方便地做到项目的实时预览, 修改文件后自动刷新,Source Map 和 反向代理等功能。DevServer会启动一个HTTP 服务器用于服务网页请求,同时会帮助启动 Webpack ,并接收 Webpack 发出的文件更变信号,通过 WebSocket 协议自动刷新网页做到实时预览。

DevServer 服务器功能:

  1. 提供 HTTP 服务而不是使用本地文件预览
  2. 支持开发环境http的反向代理

Webpack 原生的功能:

  1. 监听文件的变化并自动刷新网页,做到实时预览
  2. 支持 Source Map,以方便调试。

简单的使用案例:

webpack.config.js

const path = require('path');

module.exports = {
    
  entry: './src/main.js',
  output: {
    
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  // 这个配置项是属于:DevServer 工具的配置项
  devServer: {
    
    // 1.指定服务的ip
    host: "localhost",
    // 2.指定服务的端口
    port: 9000,
    // 3.开发环境进行http的代理
    proxy: {
    
      // 匹配 url 路径的开头
      '/api': {
    
        // 1.路劲只要是/api开头的url都代理到下面这个网站。
        // 例如:fetch('/api/xxxx') 会代理到 https://news-at.zhihu.com/api/xxxx
        // 例如:fetch('http://localhost:9000/api/xxxx') 这种写法会代理失败
        target: 'https://news-at.zhihu.com',
        ws: true, // 2.允许代理 websockets 协议
        changeOrigin: true //3.需要虚拟托管的站点要设计为true。建议设为 true,开发时大部分情况都是虚拟托管的站点
      }
    }
  }
};

1.安装 DevServer 服务器

DevServer 开发工具的全称是:webpack-dev-server

1.新建一个项目

|-- index.html
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- common.js
|   `-- main.js
`-- webpack.config.js

package.json

{
    
  "name": "testdevserver",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack --mode production"
  },
  "author": "liujun",
  "license": "ISC",
  "devDependencies": {
    
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}

1.安装HTTP服务器开发工具:npm install [email protected] --save-dev

2.编写启动服务器脚本:

"dev": "webpack-dev-server" 或者 "dev": "webpack-dev-server --hot --devtool source-map"

3.编写项目打包脚本:"build": "webpack --mode production"

webpack.config.js

const path = require('path');

module.exports = {
    
  entry: './src/main.js',
  output: {
    
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  devServer: {
    
  }
};

common.js

function get(content) {
    
  console.log('111')
}

// 通过 CommonJS 规范导出 get 函数
module.exports = get;

main.js

// 1.通过 CommonJS 规范导入 get 函数
const get = require('./common.js');
// 2.执行 get 函数
get();

index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--1.导入 Webpack 输出的 JavaScript 文件-->
<!-- <script src="../dist/main.js"></script> -->

<!--2.导入 DevServer 输出的 JavaScript 文件-->
<script src="bundle.js"></script>
</body>
</html>

2.启动本地HTTP服务

打开终端,在项目的根目录执行:npm run dev 命令, DevServer 就启动了,这时你会看到控制台有一串日志输出:

PS F:\blog\webpack-study\webpackCode\08-配置-devServer> npm run dev

> [email protected]1.0.0 dev F:\blog\webpack-study\webpackCode\08-配置-devServer
> webpack-dev-server

i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from F:\blog\webpack-study\webpackCode\08-[./src/main.js] 89 bytes {
    main} [built]
    + 19 hidden modules
    ....
    ....
i 「wdm」: Compiled successfully.

这意味着 DevServer 启动的 HTTP 服务器监听在 http://localhost:8080/ ,DevServer 启动后会一直驻留在后台保持运行,访问这个http://localhost:8080/网址你就能获取项目根目录下的 index.html。 用浏览器打开这个地址你会发现页面引用的 bundle.js文件自动输出到了项目的根目录,原因是 DevServer 会把 Webpack 构建出的文件保存在内存中,在要访问输出的文件时,必须通过 HTTP 服务访问。 由于 DevServer 不会理会 webpack.config.js 里配置的 output.path 属性,所以要获取 bundle.js的正确 URL 是 http://localhost:8080/bundle.js,对应的 index.html 应该为:<script src="bundle.js"></script>

2.配置-port和host

https://www.webpackjs.com/configuration/dev-server/#devserver-host

webpack.config.js

const path = require('path');

module.exports = {
    
  // entry 和 output 是webpack原生配置项
  entry: './src/main.js',
  output: {
    
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  // devServer 这个是webpack-dev-server的配置项    
  devServer: {
    
    // 1.指定服务的ip
    host: "localhost",
    // 2.指定服务的端口
    port: 9000,
  }
};

打开终端,在项目的根目录执行:npm run dev 命令, DevServer 就启动了,这时你会看到控制台有一串日志输出:

PS F:\blog\webpack-study\webpackCode\08-配置-devServer> npm run dev

> [email protected]1.0.0 dev F:\blog\webpack-study\webpackCode\08-配置-devServer
> webpack-dev-server

i 「wds」: Project is running at http://localhost:9000/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from F:\blog\webpack-study\webpackCode\08-[./src/main.js] 89 bytes {
    main} [built]
    + 19 hidden modules
    ....
    ....
i 「wdm」: Compiled successfully.

2.配置-hot

除了通过重新刷新整个网页来实现实时预览,DevServer 还有一种被称作模块热替换的刷新技术。 模块热替换能做到在不重新加载整个网页的情况下,通过将被更新过的模块替换老的模块,再重新执行一次来实现实时预览。

webpack.config.js

const path = require('path');

module.exports = {
    
  // entry 和 output 是webpack原生配置项
  entry: './src/main.js',
  output: {
    
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  // devServer 这个是webpack-dev-server的配置项    
  devServer: {
    
    // 1.指定服务的ip
    host: "localhost",
    // 2.指定服务的端口
    port: 9000,
    // 3.模块热替换特性
    hot: true
  }
};

3.配置-proxy

下面的案例是发起一个ajax请求:https://news-at.zhihu.com/api/4/news/latest 这个接口。如果没有使用代理会出现跨越的问题。那么如何配置开发环境HTTP服务器的代理呢?看下面案例代码:

common.js

function get(content) {
    
  // 1.这个写法会devServer代理会失败。(路径不能包含:协议,ip和端口)
  // 注意:在使用 axios 时,如果开发环境 baseURL 属性的值包含:协议,ip 和 端口,将会代理失败
  // fetch('http://localhost:9000/api/4/news/latest')
  //   .then((r)=>{
    
  //     console.log('r=',r)
  //     return r.json()
  //   })
  //   .then((res)=>{
    
  //     console.log(res)
  //   })

  // 2.正确的写法
  fetch('/api/4/news/latest')
    .then((r)=>{
    
      console.log('r=',r)
      // 从结果提取body中的内容,并转成json格式
      return r.json()
    })
    .then((res)=>{
    
      console.log('res=' ,res)
    })

}

// 通过 CommonJS 规范导出 get 函数
module.exports = get;

webpack.config.js

const path = require('path');

module.exports = {
    
  entry: './src/main.js',
  output: {
    
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  devServer: {
    
    // 1.指定服务的ip
    host: "localhost",

    // 2.指定服务的端口
    port: 9000,

    // 3.开发环境进行http的代理
    proxy: {
    
      // 匹配 url 路径的开头(注意:如果url开头包含http协议和端口会匹配失败,导致代理失败)
      '/api': {
    
        // 1.路劲只要是/api开头的url都代理到下面这个网站。
        // 例如:fetch('/api/xxxx') 会代理到 https://news-at.zhihu.com/api/xxxx
        // 例如:fetch('http://localhost:9000/api/xxxx') 这种写法会代理失败
        target: 'https://news-at.zhihu.com',
        ws: true, // 2.允许代理 websockets 协议,devserver使用的就是websockets协议
        changeOrigin: true //3.需要虚拟托管的站点要设计为true。建议设为 true,开发时大部分情况都是虚拟托管的站点
      }
    }
  }
};

注意:如果url开头包含http协议和端口会匹配失败,导致代理失败

结论:

当在webpack.config.js中配置devServer 项时,先要安装webpack-dev-server, DevServer 会启动一个 HTTP 服务器用于服务网页请求,同时会帮助启动 Webpack,并接收 Webpack 发出的文件更变信号`,通过 WebSocket 协议自动刷新网页做到实时预览。

源码下载

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u012987546/article/details/100553354

智能推荐

程序员编程时戴耳机是在听什么?_csdn大数据的博客-程序员秘密

来源 | 程序人生作者 | 五五责编 |linse知乎上有个提问:程序员上班时戴耳机是在听什么?高赞回答是:戴上耳机是告诉其他人不要打扰我,实际上并没有在放音乐。程序员...

在远程Linux服务器上卸载与安装图形化界面_BBJG_001的博客-程序员秘密

原文地址卸载卸载gnome-shell主程序sudo apt-get remove gnome-shell卸载gnomesudo apt-get remove gnome卸载不需要的依赖关系sudo apt-get autoremove彻底卸载产出gnome的相关配置文件sudo apt-get purge gnome清理安装gnome时候...

大数据学习二:sparkstreaming中关于Window窗体相关操作_絮飘凌的博客-程序员秘密

1.窗口概念1.1、.SparkStreaming之window滑动窗口应用,Spark Streaming提供了滑动窗口操作的支持,从而让我们可以对一个滑动窗口内的数据执行计算操作。每次掉落在窗口内的RDD的数据,会被聚合起来执行计算操作,然后生成的rdds。1.2、每个滑动窗口操作都包含两个参数windowLength(窗口大小), slideInterval(窗口移动速率参数,即多久滑动...

无公网ip内网穿透方案_快解析的博客-程序员秘密_无公网ip访问内网

小编今天在这里跟大家分享一下无公网IP的内网穿透方案教程:搭建服务器后,利用快解析做端口映射,绑定域名提供外网访问。可以绑定自己域名,也可以直接使用免费自定义二级域名。只要本地有联网,能够上网,即可以通过快解析端口映射设置,将本地服务器内网IP端口映射到自己域名或自动生成的免费自定义二级域名上,通过域名提供外网互联网连接访问。以下是详细实现过程:(1)明确内网访问。首先要确定在局域网内可以正常访问自己的目标应用,明确所使用的内网IP和内网端口号。 (2)添加内网映射。在内网服务器本地,或在局域网内另台主机上

二次剩余入门_Eiffel灬的博客-程序员秘密_二次剩余

二次剩余入门。1,什么是二次剩余?2,二次剩余有什么用?3,二次同余方程如何求解?这一部分内容参考了这两篇文章:  http://blog.csdn.net/a_crazy_czy/article/details/5195

springbootvue电影购票网站_weixin_18392616205的博客-程序员秘密

(6)订票管理:包括查看用户订票信息、按电影名称统计售票数量、退票数量、统计销售金额,统计总销售金额等管理。(3)管理放映厅信息管理:包括放映厅的添加、更新、删除管理,查询放映厅座位数量,座位类型等管理。(1)用户信息管理:包括用户信息的添加、删除、修改、查询等模块管理。(5)回复资讯管理:查看用户咨询、回复咨询信息、删除资讯等管理。(2)电影资讯管理:包括影片的添加、删除、修改、查询等管理。(1)用户浏览、注册、登录、修改个人信息模块等管理。(5)用户选座、订票信息、查看订单、退票等模块管理。

随便推点

php setcookie机制,php setcookie详解用法_东辑事厂的博客-程序员秘密

cookie 常用于识别用户。cookie 是服务器留在用户计算机中的小文件。每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie。通过 php教程,您能够创建并取回 cookie 的值。如何创建 cookie?setcookie() 函数用于设置 cookie。注释:setcookie() 函数必须位于 标签之前。语法setcookie(name, value, expire, p...

电脑自带的应用商店连接不到服务器,win10应用商店无法连接服务器最佳解决方法..._丁香园F2E的博客-程序员秘密

在win10系统中,许多用户在选择应用的时候都进入应用商店来进行下载,非常方便可靠,但是近日有的用户在打开win10应用商店时,出现了提示无法连接服务器的页面,那么win10应用商店无法连接服务器怎么办呢?接下来就来给大家讲讲win10应用商店无法连接服务器最佳解决方法。具体方法:方法一、删除C:\用户(Users)\你的用户名(username)\AppData\local\Packages\M...

Java并发框架——AQS之怎样使用AQS构建同步器_weixin_33670786的博客-程序员秘密

AQS的设计思想是通过继承的方式提供一个模板让大家能够非常easy依据不同场景实现一个富有个性化的同步器。同步器的核心是要管理一个共享状态,通过对状态的控制即能够实现不同的锁机制。AQS的设计必须考虑把复杂反复且easy出错的队列管理工作统一抽象出来管理,而且要统一控制好流程,而暴露给子类调用的方法主要就是操作共享状态的方法,以此提供对状态的原子性操作。一般子类的同步器中使用AQS提供的g...

Centos7.5下源码编译安装gcc-8.2.0_2048bytes的博客-程序员秘密

Centos7.5yum安装的默认gcc版本为4.8.5,如果需要使用gcc的最新特性,则需要源码安装gcc最新版。编译过程中解决不少报错,最终有了本文的实测成功记录。yum 安装依赖包yum install -y epel-releaseyum install -y gcc gcc-c++ gcc-gnat libgcc libgcc.i686 glibc-devel bison fl...

Win10+vs2017+OpenCV3.4.1+doxygen+cmake安装(DEBUG64位)_再路上1216的博客-程序员秘密

下载软件软件:vs2017 网址:https://visualstudio.microsoft.com/zh-hans/vs/whatsnew/软件:opencv-3.4.1网址:https://opencv.org/releases.html软件:cmake-3.11(下载解压版本即可)网址:https://cmake.org/files/软件:opencv_co...

K - Rochambeau(POJ2912)_CHEN_XU_LING的博客-程序员秘密

N children are playing Rochambeau (scissors-rock-cloth) game with you. One of them is the judge. The rest children are divided into three groups (it is possible that some group is empty). You don’t know who is the judge, or how the children are grouped. T.

推荐文章

热门文章

相关标签