webpack打包js代码

场景：

有时候需要将es6语法转化成es5语法，便于低版本浏览器兼容。

安装：

npm install babel-loader @babel/core @babel/preset-env -D

解释babel-loader ==> 在webpack中应用babel解析es6的桥梁
@babel/core ==> babel的核心模块
@bable/preset-env ==> 一组babel插件的集合

使用：

在module.rules中使用

{
        test:/\.js$/,
        exclude:/node_modules/,  //不解析node_modules中的js
        use:{
          loader:'babel-loader',
          options:{
            presets:["@babel/preset-env"],
          }
        }
      }

报错：

此时执行 npx webpack命令编译 执行npx webpack-dev-server启动服务，在后台会报错：regeneratorRuntime is not defined。

原因：

regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容async/await的语法。regeneratorRuntime is not defined这个错误显然是未能正确配置babel。

解决：

添加以下插件及配置：

# 这个包中包含了regeneratorRuntime，运行时需要
npm install --save @babel/runtime

# 这个插件会在需要regeneratorRuntime的地方自动require导包，编译时需要
npm install --save-dev @babel/plugin-transform-runtime

接着改一下babel的配置文件

{
        test:/\.js$/,
        exclude:/node_modules/,  //不解析node_modules中的js
        use:{
          loader:'babel-loader',
          options:{
            presets:["@babel/preset-env"],
            plugins:[
              ['@babel/plugin-transform-runtime']
            ]
          }
        }
    }