Skip to content
This repository was archived by the owner on Oct 12, 2022. It is now read-only.

Remove deprecated awesome-typescript-loader from docs #1300

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions pages/Integrating with Build Tools.md
Original file line number Diff line number Diff line change
Expand Up @@ -228,10 +228,6 @@ module.exports = {

See [more details on ts-loader here](https://www.npmjs.com/package/ts-loader).

Alternatives:

* [awesome-typescript-loader](https://www.npmjs.com/package/awesome-typescript-loader)

# MSBuild

Update project file to include locally installed `Microsoft.TypeScript.Default.props` (at the top) and `Microsoft.TypeScript.targets` (at the bottom) files:
Expand Down
34 changes: 14 additions & 20 deletions pages/tutorials/Migrating from JavaScript.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,51 +85,45 @@ You can read more there.
## Webpack

Webpack integration is pretty simple.
You can use `awesome-typescript-loader`, a TypeScript loader, combined with `source-map-loader` for easier debugging.
You can use `ts-loader`, a TypeScript loader.
Simply run

```shell
npm install awesome-typescript-loader source-map-loader
npm install --save-dev ts-loader
```

and merge in options from the following into your `webpack.config.js` file:

```js
module.exports = {
entry: "./src/index.ts",
output: {
filename: "./dist/bundle.js",
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},

module: {
loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
rules: [
{
// // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},

preLoaders: [
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" }
]
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},

// Other options...
};
```

It's important to note that awesome-typescript-loader will need to run before any other loader that deals with `.js` files.

The same goes for [ts-loader](https://github.com/TypeStrong/ts-loader), another TypeScript loader for Webpack.
You can read more about the differences between the two [here](https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader).

You can read more about ts-loader [here](https://github.com/TypeStrong/ts-loader).
You can see an example of using Webpack in our [tutorial on React and Webpack](./React%20&%20Webpack.md).

# Moving to TypeScript Files
Expand Down