升级至webpack 4后import语句无法正常工作求助

我来帮你排查下这个问题——从Webpack 3升到4后构建正常但浏览器里import失效，大概率是配置里的几个关键点没跟上Webpack 4的变化，结合你给出的依赖信息，我整理了几个可能的解决方向：

1. 务必添加Webpack的mode配置字段 #

Webpack 4新增了mode核心选项（可选值development或production），如果完全没设置这个字段，默认会启用production模式，但这种情况下可能会触发一些你没预料到的模块优化逻辑，导致import语句在浏览器中无法正常解析。

你需要在Webpack配置文件里明确声明：

module.exports = {
  mode: 'development', // 根据环境切换成'production'
  // 其他原有配置...
};

2. 调整Babel配置，避免干扰Webpack的ES模块处理 #

你当前使用的是Babel 6，而Webpack 4对ES模块的处理逻辑有了调整，需要确保Babel不会把ES模块转译为CommonJS格式（否则会和Webpack的模块加载机制冲突）：

• 如果你用了babel-preset-env，一定要在预设配置里加上modules: false，让Webpack自己负责ES模块的处理：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ],
  "plugins": [
    "syntax-dynamic-import",
    "add-module-exports",
    // 其他插件...
  ]
}

• 另外，babel-plugin-dynamic-import-node是专门给Node.js环境处理动态import用的，浏览器环境下完全不需要这个插件。你可以通过Babel的env配置，只在测试/Node环境启用它：

{
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

3. 检查Webpack的模块解析规则 #

Webpack 4调整了默认的模块解析逻辑，你需要确认resolve配置没有覆盖必要的扩展名：

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json'], // 确保包含项目中用到的文件扩展名
    // 其他resolve配置（别名等）...
  }
};

如果你的项目里有自定义别名，也要检查这些别名是否和Webpack 4的新解析规则冲突。

4. 验证入口文件及模块引入语法 #

确认你的Webpack入口文件路径正确，且文件内的import语法没有错误。比如如果是动态import的写法，要确保syntax-dynamic-import插件已经正确启用（Webpack 4本身支持动态import打包，但需要Babel插件先解析语法）。

5. 排查第三方依赖的兼容性 #

有些旧的第三方依赖可能没有适配Webpack 4的模块处理方式，如果你是引入某个特定依赖后才出现问题，可以尝试暂时移除该依赖，看是否恢复正常，逐步定位问题源。

内容的提问来源于stack exchange，提问作者Alejandro Garcia Anglada