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中输入npm webpack-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
.
HotModuleReplacementPlugin
(后续补充吧)
webpack学习笔记 (三) webpack-dev-server插件和HotModuleReplacementPlugin插件使用的更多相关文章
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- webpack学习笔记(3)--webpack.config.js
module 参数 使用下面的实例来说明 module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { ...
- webpack学习笔记(1)--webpack.config.js
主要的信息都是来自于下方所示的网站 https://webpack.docschina.org/configuration 从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项 ...
- webpack学习笔记(4)--webpack.config.js
devtool参数 这个参数控制是否生成,以及如何生成source map,已经在官网的doc说明总结了. 下表总结了各个参数和使用的情况 devtool 构建速度 重新构建速度 生产环境 品质(qu ...
- webpack学习笔记(2)--webpack.config.js
3 模式 mode mode 参数设置为 development(开发模式), production(生产模式) 或 none(无),可以启用对应环境下 webpack 内置的优化.默认值为 prod ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- python3.4学习笔记(三) idle 清屏扩展插件
python3.4学习笔记(三) idle 清屏扩展插件python idle 清屏问题的解决,使用python idle都会遇到一个常见而又懊恼的问题——要怎么清屏?在stackoverflow看到 ...
- JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(三) indigo rplidar rviz slam
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
随机推荐
- Centos7安装net Core
官方文档:https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/install 我这里是物理机,不是虚拟机 第一步: sudo ...
- MATLAB 通过对话框返回值选择下一步操作
学习来源:http://muchong.com/t-10428977-1-pid-1 Userchoice = questdlg(['您确定导入彩色图像?'],'提示','转为灰度图处理','展示彩色 ...
- 百度站内搜索https不可用切换api搜索,加上谷歌api站内搜索
google推https几年了,百度开始宣传全面https,但是,百度站内搜索 自己的服务却不走https,接口报错.百度分享也是. 然后采用http://search.zhoulujun.cn/cs ...
- Linux格式化、挂载及卸载数据盘
注意: 磁盘分区和格式化是高风险行为,请慎重操作.本文档描述如何处理一个新买的数据盘,如果您的数据盘上有数据,请务必对数据进行备份以避免可能的数据丢失. 服务器仅支持对 数据盘 进行分区,而不支持对 ...
- IAR Embedded Workbench for ARM 8.22.1 基础使用教程
面向尚未熟悉且初次使用该软件的新手(比如我...) 1.建立新工作区 File-->>New Workspace 2.建立新项目 1) Project-->>Create Ne ...
- Maven不能下载SNAPSHOT包但是能下载RELEASE包的解决办法
在使用过程中,Maven默认配置是不能下载SNAPSHOT包的,这是基于一种代码稳定性进行考量得出的结论.引入SNAPSHOT包最大的问题就是,由于SNAPSHOT允许重复上传,所以引用一个这样的包开 ...
- STD函数的内部计算公式
各股票软件的标准差函数STD是不同的,而布林线的上下轨是以STD为基础计算出来的,所以使用布林线应小心.以2008/3/28的上证综指为例,利用如下代码:"收盘价3日STD:STD(CLOS ...
- NOIP2015题解
D1T1模拟 #include<bits/stdc++.h> #define re(i,l,r) for(int i=(l);i<=(r);i++) using namespace ...
- HTTP请求中GET和POST的区别
一.原理区别 一般我们在浏览器输入一个网址访问网站都是GET请求;再FORM表单中,可以通过设置Method指定提交方式为GET或者POST提交方式,默认为GET提交方式. HTTP定义了与服务器交互 ...
- flutter- 圆角
单个圆角变化 Container( height: 200, decoration: BoxDecoration( color: Colors.green, borderRadius: BorderR ...