webpack学习笔记 (三) webpack-dev-server插件和HotModuleReplacementPlugin插件使用
webpack-dev-server插件
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能:
- 为静态文件提供服务
- 自动刷新和热替换(HMR)
HotModuleReplacementPlugin插件
HotModuleReplacementPlugin主要用于代码热替换(具体用途还不清楚,因为没有研究通透吧)
一、webpack-dev-server插件说明
安装:
在cmd中输入npmwebpack-dev-server -g执行;
启动:
在cmd中输入 webpack-dev-server执行;
额外参数配置
在webpack.config.json中增加devServer配置项
配置参数说明如下:
--content-base <file/directory/url/port>
: base path for the content.--quiet
: don’t output anything to the console.--no-info
: suppress boring information.--colors
: add some colors to the output.--no-colors
: don’t use colors in the output.--compress
: use gzip compression.--host <hostname/ip>
: hostname or IP.0.0.0.0
binds to all hosts.--port <number>
: port.--inline
: embed the webpack-dev-server runtime into the bundle.--hot
: adds theHotModuleReplacementPlugin
and switch the server to hot mode. Note: make sure you don’t addHotModuleReplacementPlugin
twice.--hot --inline
also adds thewebpack/hot/dev-server
entry.--public
: overrides the host and port used in--inline
mode for the client (useful for a VM or Docker).--lazy
: no watching, compiles on request (cannot be combined with--hot
).--https
: serves webpack-dev-server over HTTPS Protocol. Includes a self-signed certificate that is used when serving the requests.--cert
,--cacert
,--key
: Paths the certificate files.--open
: opens the url in default browser (for webpack-dev-server versions > 2.0).--history-api-fallback
: enables support for history API fallback.--client-log-level
: controls the console log messages shown in the browser. Useerror
,warning
,info
ornone
.
webpack-dev-server相关介绍请参见这里
HotModuleReplacementPlugin
(后续补充吧)
转载于:https://www.cnblogs.com/sunflowerGIS/p/6821792.html
webpack学习笔记 (三) webpack-dev-server插件和HotModuleReplacementPlugin插件使用相关推荐
- webpack学习笔记(三):监听文件变化并编译
在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行.这次学习如何在文件发生变化时自动打包编译. 首先,我们来看一下配置文件 const path = requ ...
- webpack学习笔记1
webpack学习笔记1:基本概念 前言: 现在在日常的开发中,webpack已经是必不可少的东西了,现在的需求基本都是用webpack对资源进行打包整合,所以打算写一点关于webpack的东西,这是 ...
- vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...
一.webpack中使用css文件: loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件. 安装loader: 官网介绍: 安装: cnpm install - ...
- webpack学习笔记(二):认识配置和命令执行
在上一篇webpack学习笔记中,直接在命令行中使用npx webpack对项目进行打包时所使用的配置都是默认的,入口文件默认是src目录下的index.js文件,输出文件默认是dist文件夹下的ma ...
- K8S 学习笔记三 核心技术 Helm nfs prometheus grafana 高可用集群部署 容器部署流程
K8S 学习笔记三 核心技术 2.13 Helm 2.13.1 Helm 引入 2.13.2 使用 Helm 可以解决哪些问题 2.13.3 Helm 概述 2.13.4 Helm 的 3 个重要概念 ...
- 【AngularJs学习笔记三】Grunt任务管理器
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
- J2EE学习笔记三:EJB基础概念和知识 收藏
J2EE学习笔记三:EJB基础概念和知识 收藏 EJB正是J2EE的旗舰技术,因此俺直接跳到这一章来了,前面的几章都是讲Servlet和JSP以及JDBC的,俺都懂一些.那么EJB和通常我们所说的Ja ...
- iView学习笔记(三):表格搜索,过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
- SurfaceFlinger学习笔记(三)之SurfaceFlinger进程
概述 本系列是基于android Q 即android10 SurfaceFlinger学习笔记(一)应用启动流程 SurfaceFlinger学习笔记(二)之Surface SurfaceFling ...
最新文章
- LSTM 为何如此有效?这五个秘密是你要知道的
- TensorFlow练习18: 根据姓名判断性别
- python3 安装包 源码包 下载慢问题 解决方法
- python生成gif【简明教程】
- 努力将SQL Server像玩游戏一样熟练
- 搞懂 SQL 查询优化原理分析,秒速处理大数据量查询
- Open Source Web Design!
- #2686. 「BalticOI 2013」雪地足迹 双端队列01bfs + 模型转换
- [Buzz.Today]2013.03.14
- LeetCode 656. 金币路径(DP)
- 遇劣势变蠢、发语音嘲讽人类……OpenAI这些奇葩DOTA操作跟谁学的?
- 对象 复制构造函数
- mysql 如何抓慢查询_如何进行 MySQL慢查询 操作
- matlab2017调用vgg19,从VGG19的任意中间层中抽取特征
- android 墓碑日志,关于清明节扫墓的日记
- 机器学习 - 概念学习
- 区分QA和QC, Verification和Validation
- 小程序实现分享朋友圈
- ​万邦医药在创业板过会:上半年收入约1亿元,陶春蕾母子为实控人​
- C/C++语言入门(精讲系列)——Hello World 你好,世界
热门文章
- Java 摄氏和华氏之间的转换
- SanFeng-Clound
- 用Redis快速实现BloomFilter!
- 2018-2019-1 20165337 《信息安全系统设计基础》第一周学习总结
- str字符串 encoding( ) 方法
- EXCEL中数据筛选方法
- Codeforces Round #335 (Div. 1)--C. Freelancer's Dreams 线性规划对偶问题+三分
- C++ Primer plus 第12章类和动态内存分配复习题参考答案
- C语言-数据数据类型、变量与常量
- java并发编程实践 part 01 --gt; 线程创建方式