Webpack抛出‘Illegal import declaration’错误，疑配置问题求排查

看起来你的问题出在Babel对ES6导入语法的处理配置上，结合你的环境和配置，我整理了几个关键的排查和修复步骤：

1. 检查入口文件的import语法格式 #

你的入口文件第一行把两个import写在了同一行：

import express from 'express'; import https from 'https';

虽然ES6语法允许同一行多个导入，但部分解析器（包括旧版Babel）可能会对此报错。建议将每个import单独拆分为一行：

import express from 'express';
import https from 'https';
// Import socket.io
let io = require('socket.io').Server;
// Now import some basic middleware for express
import * as session from 'express-session';
import * as bodyParser from 'body-parser';
import * as favicon from 'serve-favicon';
// Import useful file IO
import * as path from 'path';
let fs = require('fs');

2. 修正Babel-Loader的配置方式 #

你当前在Webpack配置中使用了query字符串的方式传递Babel预设：

loader: 'babel-loader?presets[]=env'

这种写法在Webpack 4中虽然兼容，但不够清晰，且容易出现参数解析问题。推荐使用options字段明确配置，同时指定目标Node版本，让Babel仅转译当前Node版本不支持的语法：

module: {
  rules:[
    {
      test: /\.js?$/,
      exclude: /node_modules/, // 排除node_modules，避免不必要的转译
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['env', {
              targets: {
                node: '8.9.1' // 匹配你的目标Node版本
              }
            }]
          ]
        }
      }
    },
    // 其他loader规则...
  ]
}

添加exclude: /node_modules/还能提升编译速度，避免转译第三方库代码。

3. 可选：使用.babelrc统一Babel配置 #

为了让配置更清晰且易于维护，你可以创建一个.babelrc文件，将Babel预设配置移到其中：

{
  "presets": [
    ["env", {
      "targets": {
        "node": "8.9.1"
      }
    }]
  ]
}

之后Webpack中的babel-loader配置可以简化为：

{
  test: /\.js?$/,
  exclude: /node_modules/,
  use: 'babel-loader'
}

4. 验证依赖版本兼容性 #

你的devDependencies中，babel-core@6.26.3、babel-loader@7.1.4、babel-preset-env@1.6.1版本是兼容的（babel-loader 7.x对应babel-core 6.x），这部分无需调整。

完成以上步骤后，重新运行webpack命令，应该就能解决"Illegal import declaration"的解析错误了。

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