Webpack4 配置 DevServer 本地服务器

最新推荐文章于 2024-08-10 22:58:28 发布
最新推荐文章于 2024-08-10 22:58:28 发布
阅读量1.9k 收藏 1
点赞数 2
分类专栏： 构建工具 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012987546/article/details/100553354
版权

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

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

DevServer 服务器功能：

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

Webpack 原生的功能：

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

简单的使用案例：

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 webpack-dev-server@3.7.2 --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

> testdevserver@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

> testdevserver@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 协议自动刷新网页做到实时预览。

源码下载

LiuJun2Son
关注
专栏目录
vue devServer.proxy代理，统一后端域名配置和跨域解决
向宇
07-21 1707
vue devServer.proxy代理，统一后端域名配置和跨域解决，在实际开发过程中，前后端分离必定会存在跨域，配置同意域名，设置代理解决这个问题。—— 向宇
webpack-dev-server本地服务器的搭建
coderwwj的博客
04-23 346
webpack提供了一个可选的本地开发服务器，这个本地服务器是基于node.js搭建，内部使用express框架，可以实现想要让浏览器自动刷新显示我们修改后的结果。 我们需要在webpack使用之前安装它-->npm install --save-dev webpack-dev-server@3.11.2 devserver也是作为webpack中的一个选项，选项本身可以设置如下属性： contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，这里我们需要填写./dist port：端
webpack4 服务器devServer(自动编译、打开浏览器和自动刷新等)
weixin_43294560的博客
01-12 925
1、下载 cnpm install webpack-dev-server -D 2、配置 devServer:{ contentBase: path.resolve(__dirname, 'build'), 提供内容的目录 contentBase:['xx','xx',...] compress: true, 启动gzip压缩 port: 3000, 监听端口号,在localhost:3000访问 open:true, 自动打开浏览器 }
Webpack中搭建本地服务dev-server
最新发布
weixin_47342624的博客
08-10 547
HMR Socket Server，是一个socket的长连接建立连接后双方可以通信，当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk），通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新；webpack-dev-server 是运用另一个node 框架 express开启本地的静态资源服务，和开启Socket服务；
webpack4系列笔记之（6）简单配置开发服务器 devServer
qq_42744920的博客
06-06 686
开发服务器devServer
Webpack 4.X 从入门到精通 - devServer与mode（三）
weixin_34362991的博客
08-07 247
上一篇文章里详细介绍了一下插件的用法，这一篇文章接着丰富module.exports里的属性。如今的前端发展已经非常迅速了，伴随而来的是开发模式的转变。现在已经不再是写个静态页面并放在浏览器里打开预览一下了。在实际的开发中会经常需要使用http服务器，比如之前的ajax，想要看到效果就必需搭建一个服务器。搭建服务器的方式有非常的多，而we...
webpack4 devServer 参数分析
QueerUncle的博客
04-08 1060
devServer module.exports = { // ... 各个参数 } after： function (app, server) 在服务内部的所有其他中间件之后， 提供执行自定义中间件的功能。 allowedHosts array 此选项允许你添加白名单服务，允许一些开发服务器访问。 before function (app, server) 在服务内部的所有其他中间件之前， ...
使用webpack3.0配置webpack-dev-server教程
08-27
1. contentBase："./" // 本地服务器在哪个目录搭建页面，一般我们在当前目录即可； 2. historyApiFallback：true // 当我们搭建spa应用时非常有用，它使用的是HTML5 History Api，任意的跳转或404响应可以指向index...
webpack-使用webpack-dev-server.rar
04-12
然后，在 `webpack.config.js` 配置文件中添加 `devServer` 配置项： ```javascript module.exports = { // 其他配置... devServer: { contentBase: './dist', // 指定静态资源目录 hot: true, // 开启热模块...
webpack-dev-server-firewall:阻止来自未知IP的对开发服务器的访问
05-06
当前端开发人员在本地主机上运行webpack-dev-server时，他们有时希望在不同的设备（例如智能手机，平板电脑）上检查结果。 默认情况下，这很难做到，因为服务器绑定在127.0.0.1并且不允许从其他计算机接收连接。 ...
webpack-dev-server搭建本地服务器（解决webpack-cli、webpack-dev-server版本不兼容报错）08
钢铁直女
05-06 1186
webpack-dev-server搭建本地服务器webpack-dev-server搭建本地服务器，开发阶段使用1、安装webpack-dev-server（开发时依赖）2、在webpack.config.js文件中配置devServer3、运行启动解决webpack-cli、webpack-dev-server版本不兼容报错： webpack-dev-server搭建本地服务器，开发阶段使用 webpack提供的本地开发服务器，基于node.js搭建。内部使用express框架，可以实现浏览器实时更新页
Webpack 4 学习04（配置webpack-dev-server）
weixin_33704591的博客
02-24 371
前提： Webpack 4 学习01（基础配置） ​ Webpack 4 学习02（通过配置文件打包） 一、了解 webpack-dev-server webpack-dev-server用来配置本地服务器 为 webpack 打包生成的文件提供web服务 自动刷新和热替换（HMR） 二、安装webpack-dev-server npm install --save-dev webpack...
webpack4
qq_38210427的博客
05-16 463
为了让浏览器能够正确的解析, 我们需要使用 webpack 将我们的源代码进行打包。
webpack4-04-配置devServer服务器，热更新、热替换
weixin_33729196的博客
05-09 846
配置devServer服务器、热更新 在实际开发过程中，我们希望每次修改文件都会帮我们自动的刷新修改的页面或者部分被修改的内容，让开发更加高效，所以我们就需要为我们的项目提供一个简单的web服务器（webpack-dev-server），该服务器能够实现时重新加载(live reloading)、热替换的功能。 安装 npm i webpack-dev-server -D 复制代码修改 webp...
安装与配置webpack-dev-serve
m0_66504310的博客
11-27 5393
安装与配置插件 webpack-dev-serve
webpack教程--04devserve
jiaojsun的博客
10-12 590
开发服务器 npm i -D webpack-dev-server@2 (安装2的最高版本的意思，因为本教程是关于webpack3的) 然后添加以下代码 运行npm start 出现网址 http://localhost.8081/。操作成功。 该插件可以自动刷新界面内容，假如在代码中写一个U，保存之后会自动刷新，如下所示 这个开发服务器的功能有很多，也可以在文件中进行配置...
webpack4.x webpack-dev-server相关
wangchaohpu的博客
11-01 1462
1、你需要一个安装一个模块 在终端中进入项目目录下，敲下npm install webpack-dev-server --save-dev回车 2.在终端运行一段命令： node_modules\.bin\webpack-dev-server(网上有的说直接输webpack-dev-server那是错的) 成功！输出的是这一段信息： 转自：https://www.cnblogs.co...
webpack4.0基础配置以及（webpack-dev-server）的使用
yezi__6的博客
05-11 5592
今天又开启了我webpack4.0的学习旅途。上次学习webpack中途问题实在是解决不了，就搁置好久没看了。可是怎么能不看呢，毕竟自己准备进军前端一线了。哈哈~~~ 说下webpack都可以干什么吧？ 代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布等特点 好了不说啦开始基本配置吧 在开始配置之前，先新建一个文件夹webpc，在根目录下写src(js, css,....
devServer-host解析
qq_36501590的博客
08-17 1921
devServer-host
Webpack devServer配置
04-12
Webpack devServer是一个用于开发环境的轻量级服务器，它可以帮助我们在本地进行开发和调试。下面是一些常见的Webpack devServer配置选项： 1. `contentBase`：指定服务器的根目录，默认为项目根目录。可以是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值