參考：

https://webpack.js.org/loaders/babel-loader/

1、安裝 babel 相關依賴

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

2、新增 babel 配置

在 webpack.config.js 中新增 babel 的配置，以便於打包的時候將 ES6 程式碼轉譯成 ES5 程式碼。

const path = require('path');

module.exports = {
    /*設定要打包的原始檔*/
    entry: './src/main.js',
    /*設定打包後的路徑及輸出檔名
 
*/
    output: {
        /*輸出路徑，__dirname 為當前檔案所在目錄所在的路徑*/
        path: path.resolve(__dirname, 'dist'),
        /*輸出檔名*/
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                /*匹配檔案型別*/
                test: /\.m?js$/,
                /*排除目錄*/
                exclude: 
 
/(node_modules|bower_components)/,
                /*要使用的 loader 及配置項*/
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

儲存修改，然後再次執行 npm run build 命令再次打包，然後檢視打包生成的 bundle.js 檔案的內容，能夠檢視到原來 ES6 的程式碼都已經轉義成 ES5 的程式碼了（可以看到變數定義都使用的 var 關鍵字，以及之前的類定義已經轉換成 function 方式定義）。