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


热模块更新

为什么要用热模块更新呢？

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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.对业务代码进行打包转换

首先下载依赖：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options:{
                    presets: [['@babel/preset-env',{
                        // 自动识别当前代买需要补全的语法，而不是全部引入，
                        // 大大减少了打包后的体积
                        useBuiltIns:'usage'
                    }]]
                }
            }
        ]
    },

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

1
import "@babel/polyfill"

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

  • 首先下载依赖：
1
2
3
4
5
npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

npm install @babel/runtime-corejs2 --save
  • 在当前项目根目录下创建 .babelrc文件,复制以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}