webpack raw-loader with TypeScript

Another struggle of a day. I had difficulties on importing a GraphQL schema definition in TypeScript project with webpack raw-loader.

Declare in webpack.config.js to use raw-loader to import a GraphQL schema definition:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  module: {
    rules: [
      {
        test: /\.graphql$/i, // Extension which you want to load via raw-loader
        use: 'raw-loader',
      },
      // omitted
    ],
  },
  resolve: {
    extensions: ['.js', '.ts'], // Add extension if you want to raw-load without typing extension
  },
  // omitted
};

Declare in src/raw-loader.d.ts that an imported GraphQL schema definition is a type of string:

1
2
3
4
declare module "*.graphql" {
  const content: string;
  export default content;
};

Declare in tsconfig.json so that tsc does not try to compile *.graphql files:

1
2
3
{
  "exclude": ["*.graphql"]
}