Awesome

Webpack blocks - TypeScript (ts-loader)

This is a ts block providing TypeScript support using ts-loader.

webpack-blocks uses awesome-typescript-loader in its built-in typescript loader. While there is nothing wrong with this feature-rich loader, there are some cases where it doesn't quite work. In particular, it does not work for vue-loader. This package provides an alternative solution that addresses this issue.

Compatibility

webpack-blocks-ts is compabitle with Webpack 4.0 and webpack-blocks 1.0. Use the older 1.0.0 version of this package if you need to work with older versions of webpack-blocks.

Project status

This project is currently looking for a maintainer. PRs are accepted, and merged without too much scrutiny.

Installation

You can install webpack-blocks-ts using npm:

npm install --save-dev webpack-blocks-ts

or yarn:

yarn add --dev webpack-blocks-ts

Status

This package is compatible with webpack-blocks 1.x, and is therefore only compatbile with webpack 2. It is based on this code, so you may use the orignal along with webpack-blocks <1.0 if you are limited to webpack 1.

This package is in very early stages of development, and not considered production ready.

Usage

Here is the basic usage:

const {createConfig, ...} = require('webpack-blocks');
const ts = require('webpack-blocks-ts');

module.exports = createConfig([
  // ...
  ts(),
  // ...
]);

Various options can be passed to the ts block. For example:

  // ...
  ts({
    silent: true,
  }),
  // ...

These are all options of the underlying ts-loader, and are documented here.

Usage with Vue.js

As mentioned in the introduction, this block was specifically created to address issues with using the default TypeScript block with Vue.js. Here is an example using webpack-blocks-vue with this package.

const {createConfig, ...} = require('webpack-blocks');
const ts = require('webpack-blocks-ts');
const vue = require('webpack-blocks-vue');

module.exports = createConfig([
  // ...
  ts({
    appendTsSuffixTo: [/\.vue$/]
  }),
  vue({
    loaders: {
      esModule: true,
      // ...
    }
  })
  // ...
]);

In .vue files, we would then use ts as script lang:

<template>
  Hello, {{ name }}
</template>

<script lang="ts">
  import Vue from 'vue';
  import Component from 'vue-class-component';

  @Component({})
  export default class Hello extends Vue {
    name = 'World'
  }
</script>

This also works if you wish to use the src attribute instead of inlining the TypeScript code. In fact, you must use lang="ts" even in this case.

<template>
  Hello, {{ name }}
</template>

<script lang="ts" src="./Hello.ts"></script>