Webpack配置中无法使用ES6 import语法的问题咨询

问题1：如何让ES6 import语法生效？ #

你的报错本质是Webpack解析配置文件时无法识别ES6的import语法，结合你的现有配置，需要做以下几步修复：

1. 安装缺失的Babel核心依赖
   你已经安装了babel-loader，但处理配置文件的ES6语法还需要babel-core和对应预设包。由于你用的是babel-loader@7.x（对应Babel 6版本），需要安装适配的依赖：

   npm install --save-dev babel-core@6 babel-preset-es2015@6
   

2. 修正配置文件的导出方式与规则字段
   在webpack.config.common.babel.js中，你用了export const module = { ... }的命名导出，而Webpack期望配置是默认导出的对象；同时Webpack 4已用rules替代旧的loaders字段，建议同步调整：

   export default {
     module: {
       rules: [
         {
           test: /\.js$/,
           loader: 'babel-loader',
           exclude: /node_modules/ // 这里要改成正则表达式，而非字符串路径
         }
       ]
     },
   };
   

3. 确认Babel自动处理配置文件
   你已经给配置文件加上了.babel.js后缀，Webpack CLI会自动调用Babel解析该文件，配合你的.babelrc配置（presets: ["es2015"]）就能正确转译ES6语法了。

完成以上步骤后，重新执行npm run build:dev，应该就能正常识别import语法了。

问题2：是否可无需babel-loader等包，开箱即用该特性？ #

分两种场景来看：

针对项目源码文件（非Webpack配置文件）

Webpack 2+确实原生支持ES6模块语法（import/export），不需要babel-loader也能处理源码中的模块语法——Webpack会直接解析并进行Tree Shaking等优化。但注意：这仅支持模块导入导出语法，如果你的源码中有箭头函数、解构赋值等其他ES6+特性，Webpack不会将其转译为ES5，若要兼容旧浏览器仍需Babel。

针对Webpack配置文件

Webpack配置文件由Node.js直接执行，要不用Babel就用ES6模块，需要满足：

• Node.js版本 ≥ 14.13.0（更早版本需手动开启实验性ES模块支持）
• 在package.json中添加"type": "module"
• 将配置文件后缀改为.mjs（或保持.js并配合"type": "module"）

这种方式无需Babel，但存在限制：

• 不能混用CommonJS的require()语法，必须全用ES模块语法
• 部分Webpack插件或工具可能未完全适配ES模块，存在兼容风险
• 若需支持旧版本Node.js，该方案不可行

因此，若你的环境允许升级Node.js并接受上述限制，确实可以不用Babel直接在配置文件中用ES6 import；否则用Babel的方案更稳妥。

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