webpack热模块更新和使用 Babel处理 ES6语法1. 热模块更新 2. 使用 Babel处理 ES6语法 3.

热模块更新和使用 Babel处理 ES6语法

1. 热模块更新

为什么要用热模块更新呢？比如，我做了css样式的修改，当我想要在不刷新当前页面html的前提下，让样式渲染出来，就需要用到热模块更新了，相关配置:

在webpack.config.js文件中，对devServer和plugins进行配置

const webpack = require('webpack')	// 移入webpack 在plugins中需要用到它的热模块加载方法
module.exports = {    
devServer:{
    open:true,
    contentBase:'./dist',
    port:8888,
    hot:true,       // 热加载
    hotOnly:true,   // 即使html不生效，我也不让它刷新页面
},
plugins:[
    // 使用热模块更新方法
    new webpack.HotModuleReplacementPlugin()
],
}

2. 使用 Babel处理 ES6语法

有些时候，像一些低版本浏览器是不能识别我们的ES6语法的，控制台会直接提示报错了，那么我们出于兼容的考虑，就需要做很多兼容性代码了，是不是很麻烦？而通过配置webpack中的Babel,就给我们带来了很大的遍历，他可以自动把我们书写的ES6语法转换成浏览器可识别的语言，怎么进行配置呢？

对业务代码进行打包转换

首先下载依赖：

 npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev	// 对es6语法进行转换
npm install --save @babel/polyfill

1. 然后在webpack.config.js中进行配置
  
  module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader', options:{ presets: [['@babel/preset-env',{ // 自动识别当前代买需要补全的语法，而不是全部引入， // 大大减少了打包后的体积 useBuiltIns:'usage' }]] } } ] },
1. 在你当前书写js的文件最顶部引入abel/polyfill
```
import "@babel/polyfill"
```

3. 对于自己开发的第三方模块或者ui组件库时，另一种方式更加合理，不会污染全局变量

首先下载依赖：

npm install --save-dev @babel/plugin-transform-runtime

  npm install --save @babel/runtime

  npm install @babel/runtime-corejs2 --save

在当前项目根目录下创建 .babelrc文件,复制以下代码

  {
      "plugins": [
       [
      "@babel/plugin-transform-runtime",
  {
  "corejs": 2,
  "helpers": true,
  "regenerator": true,
  "useESModules": false
}
  ]
  ]
  }