未使用Babel时Webpack为何能将ES6代码转为ES5？

核心原因 #

Webpack 5 本身自带基础的语法转换能力，尤其是当你设置 target: 'node' 时：

• 它会自动将ES模块语法（import/export）转换为Node.js支持的CommonJS语法（require/module.exports），这会让打包后的代码看起来像是ES5风格。
• 但这种转换非常有限，只处理模块导入导出相关的语法，不会转译箭头函数、解构赋值、let/const这类ES6+特性——如果你的源码里有这些语法，打包后会原样保留。

另外还有一种可能：你的app.js源码本身就是ES5代码，那打包后自然还是ES5。

如果你需要完整转译ES2015+到ES5 #

还是得配置Babel，步骤如下：

1. 安装必要依赖：

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

2. 修改webpack.config.js里的module.rules：

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['@babel/preset-env', {
                            targets: {
                                node: 'current' // 适配当前运行Webpack的Node版本，也可以指定具体版本比如'14'
                            }
                        }]
                    ]
                }
            }
        }
    ]
}

这样就能把所有ES2015+语法转译为目标Node版本兼容的ES5代码。

内容的提问来源于stack exchange，提问作者dawn