webpack5 支持 ES6+

借助 babel 相关的库，可以将 ES6+ 的代码转换为 ES5，从而兼容更多的浏览器环境。

安装babel 库函数：

npm i @babel/core @babel/preset-env babel-loader --save-dev

安装完成：

修改webpack.config.js文件：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: {
    index: "./src/index.js"
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 指定打包文件名称
      inject: true // 向 html 模板注入所有静态资源
    })
  ]
};

根目录下新建 .babelrc 配置文件：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage", // 在文件运用到新特性的位置单独按需引入，处理 Promise、Map、Set、Symbol等新特性
      "corejs": 3,  // corejs 核心库的版本，（@babel/polyfill 已在 7.4.0 中弃用）是处理新特性的依赖库
      "targets": "> 0.25%, not dead" // 浏览器支持的范围
    }]
  ]
}

安装依赖：

npm i core-js@3 --save-dev

安装完成：

index.js 文件：

if (process.env.NODE_ENV !== 'production') {
  console.log('Current we are in development mode!');
}

function component () {
  const element = document.createElement('pre');

  element.innerHTML = [
    'Hello webpack!',
    '5 cubed is equal to ' ].join('\n\n');

  return element;
}

document.body.appendChild(component());

运行 npm run build构建项目，打开index.html：