前言：

为什么我们需要babel-loader？

因为我们有些旧版的浏览器（例如：IE）不支持ES5以上的语法，所以我们需要babel-loader来把我们写的ES6代码转化为ES5的代码。

如何使用babel-loader

@babel/preset-env 可以解析ES6 语法
但是如果想要解析 async - await 语法
则需要安装 @babel/plugin-transform-runtime

@babel/plugin-transform-runtime 依赖于 @babel/preset-env

npm install -D babel-loader @babel/core @babel/preset-env webpack npm install -D @babel/plugin-transform-runtime

const path = require("path")
const HtmlWebpackPulgin = require("html-webpack-plugin")
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
    clean: true,
    assetModuleFilename: 'images/[contenthash][ext]'
  },
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPulgin({
      template: './index.html',
      filename: 'app.html',
      inject: 'body'
    }),
  ],
  devServer: {
    static: './dist',
    hot: true,
  },
  module: {
    rules: [
      {
        // babel loader：把es6转换成es5，让低版本浏览器也能识别
        // @babel/core：babel的核心模块
        // @babel/preset-env webpack：babel的预设，一组babel插件的集合
        test: /\.js$/,
        // exclude排除不需要转移的文件
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            // presets预设
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
       }，
    ]
  },
}

我们修改helloworld.js

function getString(){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('helloworld')
    },1000)
  })
}
// 使用async - await 语法
export async function helloworld(){
  let str = await getString()
  console.log(str);
}
// export function helloworld() {
//   getString().then(console.log('helloworld'))
// }

成功打印

如果没有安装 @babel/plugin-transform-runtime