能否用Webpack输出ES6格式文件？打包转换职责归属疑问

当然可以！咱们一步步拆解你的问题，把每个关键点讲清楚：

1. 核心结论：完全可以输出ES6格式的bundle #

Webpack本身的核心职责是处理模块依赖、合并资源，它默认不会修改你的代码语法——也就是说，如果你的源码已经是ES6+语法，只要不额外配置语法转译工具，Webpack打包后的bundle.js就会保留ES6语法。

不过要注意：Webpack自带的runtime代码（也就是模块加载的那部分逻辑）默认是ES5的。如果连这部分也想改成ES6，可以在配置里设置target: ['web', 'es6']，让Webpack生成ES6版本的runtime。

2. 语法转译的职责划分 #

搞清楚谁负责什么，就不会混淆了：

• Webpack本身：只管打包，不管语法转译。它不会主动把ES6转成ES5，也不会把ES5转成ES6。
• Loader（比如babel-loader）：负责语法转译。如果你配置了babel-loader搭配@babel/preset-env，并且设置了目标环境为ES5，那代码才会被降级成ES5；反过来，如果你不需要降级，只要不配置这些转译规则，代码就会保持ES6。
• Babel：是最常用的语法转译工具，通过babel-loader和Webpack配合。它既可以把ES6+转成ES5（降级），也能做一些语法转换，但如果你要输出ES6，根本不需要让Babel做降级处理。

3. 实际配置示例（Webpack 5+） #

下面是一个最简单的配置，确保打包后输出ES6代码：

// webpack.config.js
module.exports = {
  entry: './src/index.js', // 你的ES6源码入口
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      // 这里不要添加babel-loader或者其他ES转译的loader
      // 如果有处理CSS、图片的loader可以正常保留
    ]
  },
  // 让Webpack的runtime也输出ES6格式
  target: ['web', 'es6']
};

如果之前你用了Babel，一定要检查你的Babel配置（比如.babelrc或babel.config.js），确保没有设置降级规则。比如如果你的Babel配置里有：

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults" }]
  ]
}

这种配置会自动把代码降级到兼容大多数浏览器的ES5，你需要修改targets或者移除这个preset，才能让代码保持ES6。

4. 补充说明 #

• 如果你是想把ES5源码转成ES6（这种场景比较少见），那需要用到其他工具（比如部分Babel预设），但Webpack本身不做这件事，还是要靠Babel或者类似的转译工具。
• Webpack 5对ES模块的支持更完善，推荐使用Webpack 5来实现这个需求，配置更灵活，生成的代码也更简洁。

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