1"use strict";(self.rspackChunkrspack_website=self.rspackChunkrspack_website||[]).push([["2i"],{vx(e,r,s){s.r(r);var n=s("i"),a=s("f");function i(e){let r={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,a.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(r.h1,{id:"hotmodulereplacementplugin",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#hotmodulereplacementplugin",children:"#"}),"HotModuleReplacementPlugin"]}),"\n",(0,n.jsx)(r.p,{children:"Enables hot module replacement (HMR)."}),"\n",(0,n.jsxs)(r.h2,{id:"examples",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,n.jsx)(r.p,{children:"Enabling HMR is straightforward and in most cases no options are necessary."}),"\n",(0,n.jsxs)(r.p,{children:["Note that HMR can not be used in production build. You can use ",(0,n.jsx)(r.code,{children:"process.env.NODE_ENV"})," to determine if it is a development environment."]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"rspack.config.mjs",lang:"js",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { rspack } "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@rspack/core'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:" isDev"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:" process"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"env"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"NODE_ENV"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" ==="}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'development'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(r.span,{className:"line"}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" plugins"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" [isDev "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"&&"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" new"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:" rspack"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".HotModuleReplacementPlugin"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"()]"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(r.h2,{id:"runtime-api",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#runtime-api",children:"#"}),"Runtime API"]}),"\n",(0,n.jsxs)(r.p,{children:["When you register the ",(0,n.jsx)(r.code,{children:"HotModuleReplacementPlugin"})," plugin, Rspack will inject HMR related runtime APIs, such as ",(0,n.jsx)(r.code,{children:"module.hot"})," and ",(0,n.jsx)(r.code,{children:"import.meta.webpackHot"}),"."]}),"\n",(0,n.jsxs)(r.p,{children:["See ",(0,n.jsx)(r.a,{href:"/api/runtime-api/hmr.html",children:"HMR API"})," for more details."]}),"\n",(0,n.jsxs)(r.h2,{id:"react-fast-refresh",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#react-fast-refresh",children:"#"}),"React Fast Refresh"]}),"\n",(0,n.jsxs)(r.p,{children:["To enable Fast Refresh in React projects, you also need to use the ",(0,n.jsx)(r.a,{href:"https://www.npmjs.com/package/@rspack/plugin-react-refresh",rel:"noopener noreferrer",target:"_blank",children:"@rspack/plugin-react-refresh"})," plugin."]}),"\n",(0,n.jsxs)(r.p,{children:["See ",(0,n.jsx)(r.a,{href:"/guide/integrations/react.html#fast-refresh",children:"React - Fast Refresh"})," for more details."]}),"\n",(0,n.jsxs)(r.h2,{id:"preact-fast-refresh",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#preact-fast-refresh",children:"#"}),"Preact Fast Refresh"]}),"\n",(0,n.jsxs)(r.p,{children:["To enable Fast Refresh in Preact projects, you also need to use the ",(0,n.jsx)(r.a,{href:"https://www.npmjs.com/package/@rspack/plugin-
1preact-refresh",rel:"noopener noreferrer",target:"_blank",children:"@rspack/plugin-preact-refresh"})," plugin."]}),"\n",(0,n.jsxs)(r.p,{children:["See ",(0,n.jsx)(r.a,{href:"/guide/integrations/preact.html#preact-refresh",children:"Preact - Fast Refresh"})," for more details."]})]})}function t(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:r}={...(0,a.R)(),...e.components};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(i,{...e})}):i(e)}t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["en%2Fplugins%2Fhot-module-replacement-plugin.mdx"]={toc:[{id:"examples",text:"Examples",depth:2},{id:"runtime-api",text:"Runtime API",depth:2},{id:"react-fast-refresh",text:"React Fast Refresh",depth:2},{id:"preact-fast-refresh",text:"Preact Fast Refresh",depth:2}],title:"HotModuleReplacementPlugin",headingTitle:"HotModuleReplacementPlugin",frontmatter:{description:"Enabling HMR is straightforward and in most cases no options are necessary"}},s.d(r,{default:()=>t})}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.