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:

``javascript
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:

`javascript
// ...
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.

`javascript
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:

`html



`

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.

`html



``