https://github.com/jonaskello/typescript-webpack-minimal
Mininal setup for using typescript with webpack
https://github.com/jonaskello/typescript-webpack-minimal
typescript webpack webpack2
Last synced: about 1 year ago
JSON representation
Mininal setup for using typescript with webpack
- Host: GitHub
- URL: https://github.com/jonaskello/typescript-webpack-minimal
- Owner: jonaskello
- Created: 2017-03-06T22:04:57.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-08T08:39:05.000Z (over 9 years ago)
- Last Synced: 2025-03-31T14:06:39.585Z (about 1 year ago)
- Topics: typescript, webpack, webpack2
- Language: JavaScript
- Size: 24.4 KB
- Stars: 8
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# typescript-webpack-minimal
Mininal setup for using typescript with webpack
# How to use
```
yarn install
yarn start
# Open your browser to the url noted in output (usually localhost:8008)
```
# How to reproduce
The setup can be reproduced by running these commands:
```
mkdir typescript-webpack-minimal
cd typescript-webpack-minimal
yarn init -y
yarn add --dev typescript webpack ts-loader webpack-dev-server
./node_modules/typescript/bin/tsc --init
```
Replace last `}` in package.json with:
```
,
"scripts": {
"start": "webpack-dev-server",
"tsc": "tsc"
}
}
```
Create webpack.config.js
```
var path = require("path");
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/dist/"
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "ts-loader" }
]
},
devServer: {
stats: {
assets: false,
hash: false,
chunks: false,
errors: true,
errorDetails: true,
},
overlay: true
}
};
```
Create index.html
```
typescript-webpack-minimal
```
Create src/index.tsx
```
const x: number = 42;
const message: string = `Hello ${x}`;
document.getElementById("root").innerHTML = message;
```