Webpack报错：Unexpected token import，如何用ES6编写配置文件？

你遇到的问题核心在于：Node.js默认不支持ES6的import/export模块语法，而Webpack 3在处理.babel.js后缀的配置文件时，需要确保Babel能正确转译这个文件，让Node环境可以执行它。下面是具体的解决步骤：

1. 补充安装必要的Babel依赖 #

首先需要安装@babel/register，它能让Node.js在加载文件时自动用Babel完成转译：

npm install --save-dev @babel/register

2. 调整.babelrc配置，适配Node环境 #

修改你的.babelrc，给@babel/preset-env添加目标环境和模块转译规则，确保ES6模块语法被转为Node能识别的CommonJS：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      },
      "modules": "commonjs"
    }]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-runtime"
  ]
}

这里设置modules: "commonjs"是关键——因为配置文件是由Node直接执行的，不是Webpack打包的业务代码，必须转译为Node兼容的模块语法。

3. 备选方案：用启动脚本兜底（如果上述步骤不生效） #

如果修改.babelrc后仍报错，可以创建一个启动文件webpack-start.js，手动指定转译规则：

require('@babel/register')({
  presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
});
module.exports = require('./webpack.config.babel.js');

然后修改package.json中的打包脚本：

{
  "scripts": {
    "build": "node webpack-start.js"
  }
}

通过这个脚本启动Webpack时，会先完成配置文件的转译，再执行打包流程。

额外注意点 #

• 确认配置文件名是webpack.config.babel.js，Webpack会自动识别这个后缀并尝试用Babel处理，但前提是依赖安装完整。
• 你使用的是Babel 7的beta版本，功能上没问题，但如果遇到奇怪的兼容性问题，可以考虑升级到稳定版（如果项目允许的话）。

完成以上步骤后，你应该就能正常用ES6的import/export语法编写Webpack配置文件了。

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