一、Hot Module Replacement 热模块替换
二、使用babel处理ES6
——————————————
写在前面
当运行npm run start的时候，webpack对项目进行打包，但是没有生成dist目录， 其实是因为生成了 只是在内存中运行
image.png
一、Hot Module Replacement 热模块替换
作用：
当页面发生变化的时候，不要刷新页面，而是将那些发生变化的元素变了，而那些没发生变化的元素保持不变
使用：
添加hot 就是启动这不刷新页面的形式
添加hotOnly 是即使更换失败了，也不要刷新我的页面
image.png
image.png
二、使用babel、polyfill处理ES6
安装
npm install --save-dev babel-loader @babel/core
@babel/core 是babel核心库
npm install @babel/preset-env --save-dev
preset-env 包含了所有es6转es5的语法转换规则
在一些低版本浏览器对于某些语法还是需要进一步转换 ，这时需要用到polyfill进行补充以支持一些低版本浏览器的特性
npm install --save polyfill
使用时在要js顶部引入polyfill
image.png
默认情况下polyfill会对所有的es6转es5语法都进行翻译，但实际上只需要转换用到的即可， 因此需要配置userBuiltIns属性
配置的时候
image.png
默认的时候会把所有polifill都注入进来，这样会造成浪费 所以需要添加配置属性
targets, 如果是谷歌大于67版本的就不用转换
useBuiltIns 按需引入（只有用到es6的才注入， 没有用到的es6， 就不会注入）
如果是在开发一个库的时候要用runtime方式引用，他会通过闭包的方式解析es6语法，不会造成污染全局变量，而preset-env 会造成污染全局变量。
下面是runtime方式的写法，不需要写presets 只写plugins即可
在index.js中也不需要进入pollfill
需要安装core2
npm install --save @babel/runtime-corejs2
然后进行如下配置
image.png
下面是写的是业务代码时只需要配置presets代码即可
image.png
然后在index.js中引入polyfill即可
image.png
对babel配置项的内容非常多时候会提取一个.babelrc文件，专门用于配置babel
，然后删除webpack.config.js 中的options中的内容。
image.png
删除options前
image.png
webpack.config.js 删除options后
image.png
网友评论