如何在Webpack 4中使用ES6 import/export？模块解析失败求助

这种明明定位到文件却解析失败的情况确实挺挠头的，我之前踩过类似的坑，咱们一步步排查可能的问题：

Webpack 4虽然支持零配置，但如果你的入口不是默认的src/index.js，就必须手动指定entry；另外，模块解析的后缀设置也容易出问题：

• 检查你的webpack.config.js（如果有的话）是否正确配置了入口和输出：

module.exports = {
  mode: 'development', // 先切到开发模式，避免生产模式的混淆干扰排查
  entry: './src/app.js', // 明确指定你的入口文件
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  resolve: {
    extensions: ['.js', '.json'] // 确保包含.js，Webpack默认会解析这两个，但如果自定义了这个字段，一定要加上.js
  }
};

• 如果没写配置文件，Webpack会默认找src/index.js，这时候你要么把app.js改名为index.js，要么运行时通过webpack --entry ./src/app.js指定入口。

ES6的导出分默认导出和命名导出，两者的导入语法必须对应，错配会导致解析失败：

• 假设你的hello.js是默认导出：

// src/hello.js
export default function hello() {
  return "Hello World";
}

那app.js里必须这样导入：

// src/app.js
import hello from './hello'; // 不需要加花括号，路径可以省略.js（因为resolve.extensions里包含了）

• 如果是命名导出：

// src/hello.js
export function hello() {
  return "Hello World";
}

导入时必须加花括号：

// src/app.js
import { hello } from './hello';

另外，尽量避免ES6导入和CommonJS导出（比如module.exports）混用，虽然Webpack一般能兼容，但偶尔会出现解析异常。

这个是很容易忽略的细节：如果你的系统是Linux/macOS（大小写敏感文件系统），而你导入时的路径大小写和实际文件名不一致（比如文件是Hello.js，导入写./hello.js），Webpack会提示找到文件，但实际解析时会因为大小写不匹配失败。

• 确保你已经正确安装了Webpack 4的依赖：webpack和webpack-cli（Webpack 4需要搭配webpack-cli 3.x版本，版本不兼容也会出问题）。可以试试删除node_modules和package-lock.json，重新执行npm install。
• 目标文件的读取权限：如果hello.js没有可读权限，Webpack能定位到路径，但无法读取内容，也会报解析失败。可以手动打开文件确认是否能正常读取。

如果你配置了babel-loader等Loader，要确保Babel的配置正确：

• 如果只是处理基础的ES6 import/export，Webpack 4本身就能直接处理，不需要额外的Babel配置；
• 如果确实需要Babel，要确保.babelrc或babel.config.js里包含@babel/preset-env，并且没有禁用模块转换：

{
  "presets": [
    ["@babel/preset-env", { "modules": false }] // 保持ES6模块语法，让Webpack处理树摇等优化
  ]
}

你可以先从最基础的配置和语法匹配开始排查，大概率能找到问题所在。

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