首页
所有分类
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 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
Vue.js实现表格动态增加删除的方法（附源码下载）
Jan 20 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
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
iPhone(1) 数据(1) 美国航天局(1) RNA(2) 富碳陨石(1) iOS15(1) 嘧啶碱基(2) 陨石(1) DNA(2) 大脑(1)
You might like
phpnow php探针环境检测代码
2014/11/04 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
JavaScript link方法入门实例（给字符串加上超链接）
2014/10/17 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
几种二级联动案例（jQuery\Array\Ajax php）
2016/08/13 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
详解Python字典的操作
2019/03/04 Python
python爬虫基础教程：requests库（二）代码实例
2019/04/09 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
CSS去掉A标签（链接）虚线框的方法
2014/04/01 HTML / CSS
世界领先的26岁以下学生和青少年旅行预订网站：StudentUniverse
2018/07/01 全球购物
中专生毕业个人鉴定
2014/02/26 职场文书
《长征》教学反思
2014/04/27 职场文书
公共场所标语
2014/06/30 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
大一新生检讨书
2014/10/29 职场文书
爱国影片观后感
2015/06/18 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers