详解webpack-dev-server使用方法

2024-11-27 20:05:47

记录下webpack-dev-server的用法.

首先，我们来看看基本的webpack.config.js的写法

 module.exports = {
    entry: './src/js/index.js',
    output: {
      path: './dist/js',
      filename: 'bundle.js'
    }
  }

配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工作。虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包，输出新bundle.js文件，这样文件多了之后打包速度会很慢，此外这样的打包的方式不能做到hot replace，即每次webpack编译之后，你还需要手动刷新浏览器。

webpack-dev-server其中部分功能就能克服上面的2个问题。webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，即上面配置的:

  output: {
    path: './dist/js',
    filename: 'bundle.js'
  }

注意：你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

下面来结合webpack的文档和webpack-dev-server里部分源码来说明下如何使用：

启动

启动webpack-dev-server有2种方式：

通过cmd line
通过Node.js API

配置

我主要讲解下cmd line的形式,Node.js API形式大家去看下官方文档。可通过npm script进行启动。我的目录结构是:

 app
  |__dist
  |  |__styles
  |  |__js
  |    |__bundle.js
  |  |__index.html
  |__src
  |  |__styles
  |  |__js
  |    |__index.js
  |__node_modules
  |__package.json
  |__webpack.config.js

content-base

设定webpack-dev-server伺服的directory。如果不进行设定的话，默认是在当前目录下。

webpack-dev-server --content-base ./dist

这个时候还要注意的一点就是在webpack.config.js文件里面，如果配置了output的publicPath这个字段的值的话，在index.html文件里面也应该做出调整。因为webpack-dev-server伺服的文件是相对publicPath这个路径的。因此，如果你的webpack.config.js配置成这样的：

 module.exports = {
    entry: './src/js/index.js',
    output: {
      path: './dist/js',
      filename: 'bundle.js'，
      publicPath: '/assets/'
    }
  }

那么，在index.html文件当中引入的路径也发生相应的变化:

 <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>
  </head>
  <body>
    <script src="assets/bundle.js"></script>
  </body>
  </html>

如果在webpack.config.js里面没有配置output的publicPath的话，那么index.html最后引入的文件js文件路径应该是下面这样的。

 <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
  </html>

Automatic Refresh

webpack-dev-server支持2种自动刷新的方式：

Iframe mode
inline mode

这2种模式配置的方式和访问的路径稍微有点区别，最主要的区别还是Iframe mode是在网页中嵌入了一个iframe，将我们自己的应用注入到这个iframe当中去，因此每次你修改的文件后，都是这个iframe进行了reload。

通过查看webpack-dev-server的源码，lib路径下的Server.js文件，第38-48行，分别新建几个流，这几个流保存了client文件夹下的相关文件：

 // Prepare live html page
  var livePage = this.livePage = new StreamCache();
  fs.createReadStream(path.join(__dirname, "..", "client", "live.html")).pipe(livePage);

  // Prepare the live js file
  var liveJs = new StreamCache();
  fs.createReadStream(path.join(__dirname, "..", "client", "live.bundle.js")).pipe(liveJs);

  // Prepare the inlined js file
  var inlinedJs = new StreamCache();
  fs.createReadStream(path.join(__dirname, "..", "client", "index.bundle.js")).pipe(inlinedJs);

 // Init express server
  var app = this.app = new express();

  // middleware for serving webpack bundle
  this.middleware = webpackDevMiddleware(compiler, options);

  app.get("/__webpack_dev_server__/live.bundle.js", function(req, res) {
    res.setHeader("Content-Type", "application/javascript");
    liveJs.pipe(res);
  });

  app.get("/webpack-dev-server.js", function(req, res) {
    res.setHeader("Content-Type", "application/javascript");
    inlinedJs.pipe(res);
  });

  app.get("/webpack-dev-server/*", function(req, res) {
    res.setHeader("Content-Type", "text/html");
    this.livePage.pipe(res);
  }.bind(this));

当使用Iframe mode时，请求/webpack-dev-server/index.html路径时，会返回client/index.html文件，这个文件的内容就是：

<!DOCTYPE html><html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<script type="text/javascript" charset="utf-8" src="/__webpack_dev_server__/live.bundle.js">
</script>
</head>
<body></body>
</html>

这个页面会请求live.bundle.js,其中里面会新建一个Iframe，你的应用就被注入到了这个Iframe当中。同时live.bundle.js中含有socket.io的client代码，这样它就能和webpack-dev-server建立的http server进行websocket通讯了。并根据返回的信息完成相应的动作。

而Inline-mode，是webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口,

module.exports = {
    entry: {
      app: [
        'webpack-dev-server/client?http://localhost:8080/',
        './src/js/index.js'
      ]
    },
    output: {
      path: './dist/js',
      filename: 'bundle.js'
    }
  }

这样就完成了将inlinedJS打包进bundle.js里的功能，同时inlinedJS里面也包含了socket.io的client代码，可以和webpack-dev-server进行websocket通讯。

当然你也可以直接在你index.html引入这部分代码:

<script src="http://localhost:8080/webpack-dev-server.js"></script>

不过Iframe mode和Inline mode最后达到的效果都是一样的，都是监听文件的变化，然后再将编译后的文件推送到前端，完成页面的reload的。

Iframe mode

Iframe mode下cmd line不需要添加其他的内容，浏览器访问的路径是:localhost:8080/webpack-dev-server/index.html。

这个时候这个页面的header部分会出现整个reload消息的状态。当时改变源文件的时候，即可以完成自动编译打包，页面自动刷新的功能。

Inline mode

使用inline mode的时候，cmd line需要写成：

webpack-dev-server --inline --content-base ./dist

这个时候访问的路径是:localhost:8080/index.html

也能完成自动编译打包，页面自动刷新的功能。但是没有的header部分的reload消息的显示，不过在控制台中会显示reload的状态。

Hot Module Replacement

开启Hot Module Replacement功能，在cmd line里面添加--hot

webpack-dev-server --hot --inline --content-base ./dist

其他配置选项

--quiet 控制台中不输出打包的信息
--compress 开启gzip压缩
--progress 显示打包的进度

还有一切其他的配置信息可以查阅官方文档:

webpack-dev-server-cli

这是我的package.json的文件：

  {
 "name": "reptile",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist",
  "build": "webpack --progress --colors"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "babel-core": "^6.13.2",
  "babel-loader": "^6.2.5",
  "babel-preset-es2015": "^6.13.2",
  "babel-preset-react": "^6.11.1",
  "css-loader": "^0.23.1",
  "react": "^15.3.1",
  "react-dom": "^15.3.1",
  "style-loader": "^0.13.1",
  "webpack": "^1.13.2",
  "webpack-dev-server": "^1.14.1"
 }
}

首先命令行：输入 npm install 所有依赖。然后输入npm run dev。在浏览器中打开localhost:8080/index.html，然后就可以愉快的开发咯。

本地搭建API Server

如果你在本地还启动了一个api server,port为3000,这个server主要和你的前端应用进行数据交互。这个时候很显然会出现跨域的问题，那么这个时候，你前端应用的入口文件应当是用你自己启动的api server提供的。

 var express = require('express');
  var app = express();

  app.get('/', function(req, res) {
    res.send('xxx/xxx/index.html'); //这个地方填写dist/index.html的路径
  })

此外webpack.config.js:

 module.exports = {
    entry: './src/js/index.js',
    output: {
      path: './dist/js',
      filename: 'bundle.js',
      publicPath: 'localhost:8080/dist'
    },
    devServer: {
      '/get': {
        targer: 'localhost:3000',
        secure: false
      }
    }
  }

将publicPath字段的内容配置为绝对路径。同时index.html文件中对js引用的路径也改为绝对路径

<script src="localhost:8080/dist/bundle.js"></script>

如果对web-dev-server还有其他问题的话，请留言告知。

另外2篇关于webpack的文章:

webpack1.x分包及异步加载套路
webpack2分包及异步加载套路

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

浅谈webpack-dev-server的配置和使用

本文介绍了浅谈webpack-dev-server的配置和使用,分享给大家,具体如下: 1安装的WebPack-dev-server 在终端输入 npm i webpack-dev-server 安装webpack-dev-server包 2.配置dev-server 在package.json文件中的脚本中添加代码 "dev":"WebPack-dev-server --config webpack.config.js" 在webpack.config.js文件中
详解webpack-dev-server的简单使用

webpack-dev-server webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.js来连接到服务器的微型运行时. 我们来看一下下面的配置文件(webpack.config.js) var path = require("path"); module.exports = { entry:{ app:["./app/main.
使用webpack3.0配置webpack-dev-server教程

最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下.不过,在实际操作中发现,用webpack搭建服务器仍有不少坑,一方面是由于自己对文档的不熟悉,不了解webpack-dev-server的运作模式:另一方面,在翻阅了不少博客和文章后,发现不少配置实际上都跑不起来(有可能是版本的原因,也有可能是我自己配置的原因).所以我打算用webpack3.0把dev-server跑起来给大家演示一遍,顺便把一些配
详解webpack-dev-server使用http-proxy解决跨域问题

文档资料 webpack关于webpack-dev-server开启proxy的官方介绍 Vue-cli proxyTable 解决开发环境的跨域问题--虽然这篇是写vue的,不过用在webpack-dev-server上也是一样的 http-proxy-middleware--webpack-dev-server的实现方法其实是对这个的封装配置http-proxy 在webpack的配置文件(webpack.config.js)中进行配置 module.exports = { ...此处省略
使用webpack-dev-server处理跨域请求的方法

在前端调试的时候,跨域一直都是一个比较麻烦的问题,这个在之前的文章关于跨域问题的一个解决方法中其实已经讨论了一些可以使用的方法. 如果要使用 JSONP,第一是需要修改的地方比较多,而且也不太符合前端发展的大趋势,如果使用 CORS 的话并没有 application/json 类型.而且更重要的是这只是在前端调试时候的需求,并不是在上线以后的需求,所以对后端有太多的入侵也不好. 所以就有一个念想突然在大脑中闪过--加入有一个代理不就可以解决这个问题了?但是又想了一下写起来还挺麻烦,于是就被搁
关于Webpack dev server热加载失败的解决方法

利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not
详解webpack之scss和postcss-loader的配置

本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **
详解webpack模块化管理和打包工具

本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.
详解删除SQL Server 2005 Compact Edition数据库

详解删除SQL Server 2005 Compact Edition数据库本主题将介绍如何删除 Microsoft SQL Server 2005 Compact Edition (SQL Server Compact Edition) 数据库.由于 SQL Server Compact Edition 数据库是文件系统中的文件,因此需要通过删除文件来删除 SQL Server Compact Edition 数据库. 删除 SQL Server Compact 数据库调用 System.
详解webpack 打包文件体积过大解决方案（code splitting）

优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码问题: 开发环境用webpack后发现单个js文件
详解webpack 入门与解析

每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但
详解git的基本使用方法

什么是git? git是目前世界上最先进的分布式版本控制系统. git与SVN的最主要区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而工作的时候用的都是自己的电脑,所以开始工作之前需要从中央服务器那里获取最新的版本,然后开始工作,工作完后,需要把自己所做的工作推送到中央服务器.集中式版本控制系统必须要联网才能工作,如果在局域网中,有足够的宽带,运行速度够快,而在互联网环境下,网速慢通常会导致服务难以进行. git是分布式版本控制系统,没有中央服务器,每个人的电脑是一个完整的版
详解webpack的文件监听实现(热更新)

前言文件监听是在源码发生变化时,自动重新构建出新的输出文件. webpack 开启监听模式,有两种方式: 1.启动 webpack 命令时,带上 --watch 参数. 唯一缺点:需要手动刷新才能看到变化: 2.在配置 webpack.config.js 中设置 watch: true. 优点: (1) WDS 不刷新浏览器 (2) WDS 不输出文件,⽽是放在内存中 (3) 使⽤用 HotModuleReplacementPlugin 插件 1 第一种方式, --watch 1.1 配置
SpringBoot详解实现自定义异常处理页面方法

目录 1.相关介绍 2.代码实现 3.运行测试 1.相关介绍当发生异常时, 跳转到我们自定义的异常处理页面. SpringBoot中只需在静态资源目录下创建一个error文件夹, 并把异常处理页面放入其中, 页面的命名与异常错误代码对应, 如404.html, 500.html. 5xx.html可以对应所有错误代码为5开头的错误默认静态资源目录为类路径(resources)下的: /static /public /resources /META-INF/resources 2.代码实现 H
一文详解webpack中loader与plugin的区别

目录一.Loader 1.loader的作用: 2.loader的工作原理: 3. Loader 执行顺序 4.如何开发一个loader 二.Plugin 1.plugin解决其他的更多的自动化打包工作 2.自定义插件常见的Loader和Plugin loader: plugin: 一.Loader 1.loader的作用: webpack 只能直接处理 javascript 格式的代码.任何非 js 文件都必须被预先处理转换为 js 代码,才可以参与打包.loader(加载器)就是这样一个

详解webpack-dev-server使用方法

相关推荐

随机推荐