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.js"]

  },

  output: {

    path: path.resolve(__dirname, "build"),

    publicPath: "/assets/",

    filename: "bundle.js"

  }

};

你有一个app文件夹下的初始化入口文件，并打包成build.js文件到build文件夹。

webpack-dev-server可以通过NPM命令安装

$ npm install webpack-dev-server.

当前目录

webpack-dev-server会默认会指定当前目录为基本目录，除非你指定了基本目录。

$ webpack-dev-server --content-base build/

使用当前命令，webpack-dev-server将会服务于静态文件到build文件夹。服务器将会监听源文件，无论何时文件改变，都将重新编译。

被修改的包将会从内存中保存到在publicPath指定的相对目录中，这个将不会被输出到指定的output目录中。如果一个包已经存在于同一URL路径中，则内存中的包优先.

使用上述这种配置，包能够在以下路径中找到，localhost:8080/assets/bundle.js。

加载你的包文件，你需要在你指定的静态文件夹build中创建一个index.html文件(--content-base option)，以下是例子

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <script src="assets/bundle.js"></script>

</body>

</html>

在默认配置下，前往localhost:8080/来启动你的应用，配置中的资源目录，前往localhost:8080/assets。

自动刷新

webpack-dev-server支持多种模式来自动刷新页面：

  • iframe mode（页面被嵌入一个iframe并且在改变时重载）
  • inline mode（一个小型的webpack-dev-server客户端入口被添加到包中，当页面改变时自动刷新）

　每个模式都支持Hot Module Replacement.在Hot Module Replacement中，包会通知改变发生，Hot Module Replacemen将会加载更新的模块并且注入到运行的应用程序中。

Iframe mode

使用iframe mode不需要更多的配置，只需要跳转到

http://«host»:«port»/webpack-dev-server/«path».

根据上述配置：http://localhost:8080/webpack-dev-server/index.html.

  • 配置不需要更改
  • 好的信息条在应用程序上方
  • URL改变不会反射到浏览器的URL条上

Inline mode

使用inline mode，也需要：

  • 指定--inline在命令行中
  • 指定devserver: {inline: true}在webpack.config.js

这将添加webpack-dev-server客户端入口到webpack配置中。这没必要在url中改变，只需要跳转到http://«host»:«port»/«path».

根据上述配置：http://localhost:8080/index.html.

  • 必须配置option或者命令行flag
  • 日志状态打印在控制台和浏览器的控制台中
  • URL改变反射到浏览器的URL条中

web-dev-server配置的更多相关文章

  1. eclipse web开发Server配置

    用 Tomcat 和 Eclipse 开发 Web 应用程序:http://www.ibm.com/developerworks/cn/opensource/os-eclipse-tomcat/ Ec ...

  2. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  3. Jexus-5.6.3使用详解、Jexus Web Server配置

    一.Jexus Web Server配置   在 jexus 的工作文件夹中(一般是“/usr/jexus”)有一个基本的配置文件,文件名是“jws.conf”. jws.conf 中至少有 Site ...

  4. [转载]部署Office Web Apps Server并配置其与SharePoint 2013的集成

    Office Web Apps Server 是新的 Office 服务器产品,它提供 Word.PowerPoint.Excel 和 OneNote 的基于浏览器的版本.单个 Office Web ...

  5. 部署Office Web Apps Server并配置其与SharePoint 2013的集成

    部署Office Web Apps Server并配置其与SharePoint 2013的集成   Office Web Apps Server 是新的 Office 服务器产品,它提供 Word.P ...

  6. IIS服务器 远程发布（Web Deploy）配置 VS2010 开发环境 Windows Server 2008服务器系统

    原文:IIS服务器 远程发布(Web Deploy)配置 VS2010 开发环境 Windows Server 2008服务器系统 asp.net 网站有三种常用的发布方式:分别是拷贝开发机上发布好的 ...

  7. 笔记：配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  8. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  9. spring-boot整合mybatis（web mysql logback配置）

    pom.xml相关的配置说明. 配置文件看着比价多,在创建spring-boot项目的时候,自需要添加web,mysql,mybatis三个选项即可 <?xml version="1. ...

  10. spring web.xml 难点配置总结

    web.xml web.xml是所有web项目的根源,没有它,任何web项目都启动不了,所以有必要了解相关的配置. ContextLoderListener,ContextLoaderServlet, ...

随机推荐

  1. 高并发測试工具webbench

    1.简单介绍 webbench最多能够模拟3万个并发连接去測试server的负载能力.编译和配置简单,仅基于TCP协议上对server进行測试. Webbench也是开放源代码.从代码上看,每一个cl ...

  2. HDU 1422 重温世界杯 - 贪心

    传送门 题目大意: 给一串数,又正有负,求每一个前缀都大于0的最长子串长度. 题目分析: 直接贪心:每次左端点向右推1,不断延伸右端点,更新答案. code #include<bits/stdc ...

  3. 【32.89%】【codeforces 574D】Bear and Blocks

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  4. 《iOS8 Swift编程指南》类书图像

    终于拿到了样书.虽然已经猜到这将是一本很厚的书(63万字),但要真正看到实体书或者当我吃了一惊: 从以下这张照片看则更直观了.居然比艾伦.J.马库斯的<投资学>(634页)还要厚: 这本书 ...

  5. Node.js学习疑惑整理

    1.Node.js 在调用某个包时,会首先检查包中 package.json 文件的 main 字段,将其作为 包的接口模块,如果 package.json 或 main 字段不存在,会尝试寻找 in ...

  6. python去噪算法

    <programming computer vision with python >中denoise 算法有误,从网上好了可用的代码贴上,以便以后使用. 书中错误的代码: def deno ...

  7. WPF依赖属性(续)(1)

    原文:WPF依赖属性(续)(1)                 之前有写过几篇文章,详细地介绍了依赖属性的基本使用方法,如果你不想了解其内部实现机制的话,那么通过那两篇文章的介绍,足以应付平时的应用 ...

  8. jvm常用优化方案和方法

    新生代 GC(Minor GC):指发生在新生代的垃圾收集动作,因为 Java 对象大多都具备朝生夕灭的特性,所以 Minor GC 非常频繁,一般回收速度也比较快. 老年代 GC(Major GC ...

  9. 1.node 在node中 进行包与包之间函数的调用 module.exports

    本文参考学习了廖雪峰的大作 模块 但是廖的文章只模块只有一个函数,在此演示一个模块中有两个函数,在另外一个函数中是如何去调用的 //hello.js包中的内容'use strict'; var s=' ...

  10. Opencv中K均值算法（K-Means）及其在图像分割中的应用

    K均值(K-Means)算法是一种无监督的聚类学习算法,他尝试找到样本数据的自然类别,分类是K由用户自己定义,K均值在不需要任何其他先验知识的情况下,依据算法的迭代规则,把样本划分为K类.K均值是最常 ...