如何修改NX的Webpack配置以在Express应用中使用动态导入？

• 调整Webpack输出格式适配Node环境
  修改项目的webpack配置文件（一般在apps/[你的应用名]/webpack.config.js），设置libraryTarget为commonjs2，确保输出符合Node模块规范：

  module.exports = {
    // 保留原有配置
    output: {
      // ...其他output配置
      libraryTarget: 'commonjs2',
      chunkFilename: '[name].js' // 保证chunk文件能被正确识别
    }
  };
  

• 开启Node环境兼容配置
  在webpack配置中添加node选项，避免Webpack替换Node的内置变量导致路径解析错误：

  module.exports = {
    // 保留原有配置
    node: {
      __dirname: false,
      __filename: false
    }
  };
  

• 检查动态导入的路径正确性
  确保导入路径是相对路径（带./或../），本地文件不要直接写模块名：

  • 错误示例：import('utils')
  • 正确示例：import('./utils.js')
    如果用变量拼接路径，尽量让Webpack能静态解析，或者用require.resolve辅助：

  const modulePath = require.resolve('./utils.js');
  import(modulePath).then(mod => { /* 处理模块 */ });
  

• 调整NX的Build Target配置
  在project.json中检查build目标的webpack配置路径是否正确，确保chunking相关配置正常：

  {
    "targets": {
      "build": {
        "executor": "@nx/webpack:webpack",
        "options": {
          "webpackConfig": "apps/[你的应用名]/webpack.config.js",
          "outputPath": "dist/apps/[你的应用名]",
          "runtimeChunk": false,
          "vendorChunk": false
        }
      }
    }
  }
  

• 清理缓存重新构建
  缓存可能导致旧配置残留，执行以下命令重置NX缓存并重新构建：

  nx reset
  nx build [你的应用名]
  

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