首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解webpack-dev-server使用方法

Posted in Javascript onSeptember 14, 2018

记录下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消息的状态。当时改变源文件的时候，即可以完成自动编译打包，页面自动刷新的功能。

详解webpack-dev-server使用方法

Inline mode

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

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

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

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

详解webpack-dev-server使用方法

Hot Module Replacement

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

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

其他配置选项

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

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

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

详解webpack-dev-server使用方法

- Author -

苹果小萝卜

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
js实现简易计算器小功能
Nov 18 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 Javascript
详解Vue的options
May 15 Vue.js
JS 实现微信扫一扫功能
Sep 14 #Javascript
详解webpack2异步加载套路
Sep 14 #Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 #Javascript
react项目实践之webpack-dev-serve
Sep 14 #Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 #Javascript
vue删除html内容的标签样式实例
Sep 13 #Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 #Javascript
apt命令(1) json_extract(1) logging(1) Launch Mode(1) 缓冲区(1) 类加载器(1) netty(1) JOIN(1) Pickle(1) NoSQL(1)
You might like
实用函数7
2007/11/08 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
基于php缓存的详解
2013/05/15 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
python类装饰器用法实例
2015/06/04 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python常用的json标准库
2019/02/19 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
python安装sklearn模块的方法详解
2020/11/28 Python
美术指导助理求职信
2014/04/20 职场文书
三人合伙协议书范本
2014/10/29 职场文书
整改报告怎么写
2014/11/06 职场文书
保安2014年终工作总结
2014/12/06 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Python实现仓库管理系统
2022/05/30 Python