webpack之webpack-dev-server 与 webpack-hot-server
最近在弄框架,用到了webpack打包,当然不可避免的遇到了开发实际问题。在实际开发中,我们不可能改一个文件,就去构建一次,于是想到了实时更新。查看webpack,看到了webpack-dev-server。
webpack-dev-server
webpack已经想到了开发流程中的自动刷新,这就是webpack-dev-server。它是一个静态资源服务器,类似express服务器,只用于开发环境。一般来说,对于纯前端的项目(全部由静态html文件组成),简单地在项目根目录运行webpack-dev-server,然后打开浏览器 默认端口是8080,即http://localhost:8080就可以看到我们的页面了,修改任意关联的源文件并保存,webpack编译就会运行,并在运行完成后通知浏览器自动刷新。
其原理呢,就是根据所写的webpack.config.js文件,当改变entry中所涉及到的文件时,此时就会监听到并自动刷新浏览器。注意,这里生成的文件都是保存在内存中的,不会写入文件目录。因此我们改动文件,就不用再次构建,立即能看到效果,是不是很爽啊。哈哈,但是不要高兴。它也是有缺点的。
缺点:如果在请求某个静态资源的时候,webpack编译还没有运行完毕,webpack-dev-server不会让这个请求失败,而是会一直阻塞它,直到webpack编译完毕。这个对应的效果是,如果你在不恰当的时候刷新了页面,不会看到错误,而是会在等待一段时间后重新看到正常的页面,就好像“网速很慢”。
为了解决这个问题,webpack-hot-server应运而生。
webpack-hot-server
webpack-hot-middleware是一个结合webpack-dev-middleware使用的middleware,它可以实现浏览器的无刷新更新(hot reload)。这也是webpack文档里常说的HMR(Hot Module Replacement)。
建议看下具体实例:https://github.com/glenjamin/webpack-hot-middleware/tree/master/example。下载下来后,在example文件下,执行npm install,然后在浏览器中访问,http://localhost:1616/,然后改动client.js, 观察浏览器。你会发现浏览器更新了,但是没有刷新操作。
webpack.config.js文件:
var webpack = require('webpack'); module.exports = {
context: __dirname,
entry: [
// Add the client which connects to our middleware
// You can use full urls like 'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr'
// useful if you run your app from another point like django
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
// And then the actual application
'./client2.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
devtool: '#source-map',
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
};
其中,webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000,开头:webpack-hot-middleware/client,这个你直接粘贴就好,我测试下来这个client和上下文无关。而? 后面的 path=/__webpack_hmr&timeout=20000
,其中path有HMR服务监听,timeout应该是知道失联的话,达到20000毫秒就算超时,不必再做尝试。
另外再就是server.js文件,文件中已经加了注释,这里就不再赘述。
有不同意见的话,可以提给我,大家共同探讨。
webpack之webpack-dev-server 与 webpack-hot-server的更多相关文章
- Vue.js 2.x Development Build With Hot Reloading For External Server (using Webpack template)
This article assuming you created your project using webpack template. vue init webpack <PROJECT_ ...
- 【Webpack的使用指南 02】Webpack的常用解决方案
说是解决方案实际上更像是webpack的插件索引. 写这一篇的目的是为了形成一个所以,将来要用时直接来查找即可. 索引目录 1.自动构建HTML,可压缩空格,可给引用的js加版本号或随机数:html- ...
- webpack从零开始第1课:安装webpack和webpack-dev-server
原文地址:https://segmentfault.com/a/1190000012536871 webpack目录 第1课: 安装webpack和webpack-dev-server 第2课: 配置 ...
- webpack 快速入门 系列 —— 初步认识 webpack
初步认识 webpack webpack 是一种构建工具 webpack 是构建工具中的一种. 所谓构建,就是将资源转成浏览器可以识别的.比如我们用 less.es6 写代码,浏览器不能识别 less ...
- [Webpack 2] Intro to the Production Webpack Course
There are several lessons that will build on top of this project. It is a fairly standard, small web ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- webpack dllPlugin使用(基于vue-cli webpack模板)
由于本例单入口时打包的文件体积过大,将其分成多入口. 主要涉及到的几个文件为: /index.html, /webpack.dll.config.js, /build/webpack.base.con ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- webpack快速入门——实战技巧:webpack模块化配置
首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...
随机推荐
- 【Codevs 2115】数集分割
http://codevs.cn/problem/2115/ // <2115.cpp> - Sun Oct 9 12:58:23 2016 // This file is made by ...
- 【转】Material Design 折叠效果 Toolbar CollapsingToolbarLayout AppBarLayout
我非常喜欢Material Design里折叠工具栏的效果,bilibili Android客户端视频详情页就是采用的这种设计.这篇文章的第二部分我们就通过简单的模仿bilibili视频详情页的实现来 ...
- UVA - 12345 带修改的莫队
题意显然:给出初始序列,单点修改,区间查询元素的种类. 由于时限过宽,暴力可过. 比较优秀的解法应该是莫队. 带修改的莫队题解可以看https://www.luogu.org/blog/user126 ...
- Code First: 五大映射模式
映射一 Mapping the Table-Per-Hierarchy (TPH) Inheritance 模型文件 using System.Data.Entity; using System.Da ...
- VS2015 razor 提示一闪而过
出现的问题链接地址 https://social.microsoft.com/Forums/azure/zh-CN/ff308f71-c743-4f8c-b5e4-a7260c8b5f59/vs201 ...
- E20171212-hm
odd adj. 古怪的; 奇数的; 剩余的; 临时的; odd number 奇数 even adj. 偶数的 even number 偶数
- MySQL基础 — 常用命令
一.连接MySQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MySQ: 首先在打开cmd窗口,输入mysql -uroot -p ,然后空格进入MySQL控制台, ...
- [转]C++常用字符串分割方法实例汇总
本文实例汇总了C++常用字符串分割方法,分享给大家供大家参考.具体分析如下: 我们在编程的时候经常会碰到字符串分割的问题,这里总结下,也方便我们以后查询使用. 一.用strtok函数进行字符串分割 原 ...
- [APIO2007]动物园
题目描述 新建的圆形动物园是亚太地区的骄傲.圆形动物园坐落于太平洋的一个小岛上,包含一大圈围栏,每个围栏里有一种动物. 你是动物园的公共主管.你要做的是,让每个来动物园的人都尽可能高兴.今天有一群小朋 ...
- Jenkins+ant+jmeter接口自动化
1.Jenkins新建slave节点 2.Jenkins新建job,配置job,关联到slave, 3.执行构建 build文件如下 <?xml version="1.0" ...