Webpack(系列三)：热模块更新和使用 Babel处理 ES6语法

热模块更新

为何要用热模块更新呢？

好比，我作了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()
    ],
}
复制代码

使用 Babel处理 ES6语法

有些时候，像一些低版本浏览器是不能识别咱们的ES6语法的，控制台会直接提示报错了，那么咱们出于兼容的考虑，就须要作不少兼容性代码了，是否是很麻烦？

而经过配置webpack中的Babel,就给咱们带来了很大的遍历，他能够自动把咱们书写的ES6语法转换成浏览器可识别的语言，怎么进行配置呢？

1.对业务代码进行打包转换

首先下载依赖：

npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev	// 对es6语法进行转换
npm install --save @babel/polyfill			// 对语法进行补全
复制代码

而后在webpack.config.js中进行配置

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options:{
                    presets: [['@babel/preset-env',{
                        // 自动识别当前代买须要补全的语法，而不是所有引入，
                        // 大大减小了打包后的体积
                        useBuiltIns:'usage'
                    }]]
                }
            }
        ]
    },
复制代码

在你当前书写js的文件最顶部引入abel/polyfill

import "@babel/polyfill"
复制代码

2. 对于本身开发的第三方模块或者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
      }
    ]
  ]
}
复制代码