学习webpack【第三章-核心概念2】

一、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