相关代码

一、为什么需要 babel-loader

Webpack 自带加载 JS 模块的功能，但是只能做 JS 模块化的打包，并不能转化 JS 代码，比如 ES6 转成 ES5。如果将 ES6 代码运行在版本低的浏览器中，可能会报错。

Babel 是一个 JavaScript 编译器，可以将 ES6+ 转化成ES5。在 Webpack 里使用 Babel，需要使用 babel-loader。

二、使用 babel-loader

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

• babel-loader：在 Webpack 里应用 babel 解析 ES6 的桥梁；
• @babel/core：babel 核心模块；
• @babel/preset-env：babel 预设，一组 babel 插件的集合。

module.exports = {
    module: {
        rules: [
            { 
                test: /\.js$/, 
                exclude: /node_modules/, 
                use: { 
                    loader: 'babel-loader', 
                    options: { 
                        presets: ['@babel/preset-env'] 
                    } 
                } 
            }
        ]
    },
}

在浏览器中查看效果（报错是因为案例中使用了 async/await 语法）：

三、regeneratorRuntime 插件

regeneratorRuntime 是 Webpack 打包生成的全局辅助函数，由 babel 生成，用于兼容 async/await 语法。

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

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

module.exports = {
    module: {
        rules: [
            { 
                test: /\.js$/, 
                exclude: /node_modules/, 
                use: { 
                    loader: 'babel-loader', 
                    options: { 
                        presets: ['@babel/preset-env'],
                        plugins: [ 
                            ['@babel/plugin-transform-runtime']
                        ]
                    } 
                } 
            }
        ]
    },
}

此时再重新打包编译，在浏览器查看效果，就会成功运行。