webpack学习笔记 webpack-dev-server插件和HotModuleReplacementPlugin插件使用
Posted 向_日_葵
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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插件使用的主要内容,如果未能解决你的问题,请参考以下文章