Explaining webpack loader setup using ts-loader

I am working on a personal project that uses PDF.js and the easiest way to get this setup was to use the webpack distribution. I’m also using TypeScript and wanted to set up webpack to compile my .ts files so that I only had to run webpack to build my application. This post is to address a few things I found, as a complete beginner to webpack, weren’t explained well. If you’re looking for a complete guide with all the commands to run I recommend this post by James Brantly.

The documentation for ts-loader provides this example for webpack.config.js

module.exports = {
 entry: './app.ts',
 output: {
   filename: 'bundle.js'
 },
 resolve: {
   // Add `.ts` and `.tsx` as a resolvable extension.
   extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
 },
 module: {
   loaders: [
     // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
     { test: /\.tsx?$/, loader: 'ts-loader' }
   ]
 }
}

The key parts are the resolve and module sections.

resolve.extensions

The resolve.extensions property is required so webpack can find any TypeScript files referenced that need compiling. For example the following import in app.ts

   import PdfScraper from "./PdfScraping/PdfScraper";

might be compiled to something like the following JavaScript (in this case using AMD modules)

   const PdfScraper_1 = require("./PdfScraping/PdfScraper");

When webpack resolves this require (or another type of import) it uses the extensions property to determine the type of file that resolve it. Using the earlier example config webpack would be able to resolve any of PdfScraping/PdfScraper, PdfScraping/PdfScraper.webpack.js, PdfScraping/PdfScraper.web.js, PdfScraping/PdfScraper.ts, PdfScraping/PdfScraper.tsx or PdfScraping/PdfScraper.js.

Without .ts in the extensions webpack won’t resolve TypeScript files from imports and you will end up with errors like

ERROR in ./src/index.ts
Module not found: Error: Cannot resolve 'file' or 'directory' ./PdfScraping/PdfScraper in D:\repos\matthewrwilton\csv-citibank-statement\src
@ ./src/index.ts 4:21-56

module.loaders

This section configures loaders to handle different file types e.g. the example is configuring ts-loader to handle any .ts or .tsx files. The loader only applies if the condition in the test property matches the file name.

The webpack documentation also mentions that there are exclude and include properties that can be configured, but fails to explain them well. These exist to provide additional conditions for whether a loader should apply. For example the ts-loader could be configured for all .ts files, but then you could setup an exclude property to ignore .ts files in a certain directory because you want to use a different loader for those. I am not sure what happens if both the include and exclude conditions are true and I couldn’t find any examples using and explaining the include configuration for a loader. This is certainly part of webpack that could be better defined.

Advertisements
Explaining webpack loader setup using ts-loader