TypeScript+GraphQL+Express后端API项目Webpack配置问题求助

Hey there! Let's dig into your Webpack config issues for your TypeScript/GraphQL/Express backend. First off, I notice your provided config snippet has a couple obvious red flags, plus it's cut off—let's break this down step by step.

1. 致命的拼写错误 #

Your output.path uses __dirna instead of __dirname—this is a typo that will immediately cause Webpack to throw a path resolution error, since it can't recognize the misspelled variable.

2. 不完整的配置片段 #

The config you shared cuts off mid-way, and Webpack needs a full set of rules to handle TypeScript files, GraphQL schemas, and SQL queries with raw-loader.

修正并补全后的Webpack配置示例 #

const path = require('path');
const nodeExternals = require('webpack-node-externals'); // 推荐用于Node.js项目，避免打包node_modules依赖

module.exports = {
  target: 'node',
  entry: {
    server: path.resolve(__dirname, 'server.ts'),
  },
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, 'dist'), // 修正拼写错误，指定输出到dist目录
    clean: true, // 可选：每次构建前自动清理dist目录
  },
  resolve: {
    extensions: ['.ts', '.js', '.graphql', '.sql'], // 让Webpack识别这些扩展名的文件
  },
  module: {
    rules: [
      // 处理TypeScript文件
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      // 用raw-loader加载GraphQL/SQL文件为字符串
      {
        test: /\.(graphql|sql)$/,
        use: 'raw-loader',
      },
    ],
  },
  externals: [nodeExternals()], // 跳过node_modules打包，大幅提升构建速度
  devtool: 'source-map', // 可选：生成source map方便调试Node.js代码
};

额外排查要点 #

• 确认依赖已安装：Make sure you've installed all required packages:

  npm install webpack webpack-cli ts-loader raw-loader typescript @types/node @types/express --save-dev
  npm install express graphql apollo-server-express # 核心业务依赖
  

• 检查tsconfig.json：Ensure your TypeScript config is set up for Node.js:

  {
    "compilerOptions": {
      "target": "ES2020",
      "module": "CommonJS",
      "outDir": "./dist",
      "rootDir": "./",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true
    }
  }
  

• 验证文件导入：Double-check that you're importing .graphql/.sql files correctly in your code (raw-loader will load them as plain strings):

  import typeDefs from './schema.graphql';
  import userQuery from './queries/user.sql';
  

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