HMR - 模块热替换(更新) 当 某个模块更新了,就只更新改变的部分 同时浏览器界面不刷新,console 打印的历史纪录也不会清除

配置 target: ‘browserslist’, 不会热更新
配置 target: ‘web’, 会热更新
image.png

  1. import './title'
  2. if(module.hot) {
  3. module.hot.accept(['./title.js'], () =>{
  4. console.log('title 模块更新了!')
  5. })
  6. }

image.png

额外

配置了 target: ‘web’, 打包不会将箭头函数编译为 普通函数。。。
可以配置: target: ‘browserslist

Option Description
async-node[[X].Y] 编译以在类似Node.js的环境中使用(使用fs和vm异步加载块)
electron[[X].Y]-main -
electron[[X].Y]-renderer -
electron[[X].Y]-preload 为Electron for renderer进程编译,使用asyncChunkLoading设置为true的NodeTemplatePlugin,为浏览器环境提供FunctionModulePlugin,为CommonJS和Electron内置模块提供NodeTargetPlugin和ExternalsPlugin。
node[[X].Y] 编译以便在类似Node.js的环境中使用(使用Node.js require加载块)
node-webkit[[X].Y] 编译以便在WebKit中使用,并使用JSONP进行区块加载。允许导入内置Node.js模块和nw.gui(实验性)
nwjs[[X].Y] 与节点webkit相同
web 编译以在类似浏览器的环境中使用(默认)
webworker 编译为WebWorker
esX 为指定的ECMAScript版本编译。示例:es5、es2020
browserslist 从browserslist配置推断平台和ES功能(如果browserslist配置可用,则默认)

‘,