https://github.com/matt1/typescriptwebpackboilerplate
Simple boiler plate config for a typescript + webpack web project.
https://github.com/matt1/typescriptwebpackboilerplate
html typescript webpack
Last synced: about 2 months ago
JSON representation
Simple boiler plate config for a typescript + webpack web project.
- Host: GitHub
- URL: https://github.com/matt1/typescriptwebpackboilerplate
- Owner: matt1
- License: mit
- Created: 2020-04-19T10:53:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T10:04:27.000Z (over 3 years ago)
- Last Synced: 2023-03-11T19:03:21.340Z (over 3 years ago)
- Topics: html, typescript, webpack
- Language: JavaScript
- Homepage:
- Size: 466 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Typescript + Webpack Boiler Plate
Simple boiler-plate project that contains all of the required bits and pieces to
get a basic Typescript + Webpack project started for serving as a compiled
javascript bundle file, complete with static HTML, images, and CSS etc.
## Features:
* Compile all Typescript files & modules (and their dependencies) into a single
`bundle.js` file.
* Copy all static resources from `src/**` into `dist/`
* Ignores `script/` since this will be bundled.
* This means any and all `*.html` (index.html, about.html etc) files and any
sub directories (e.g. `style/`, `images/` etc) will be copied over as-is.
## Using this boiler plate for a new project
Simplest way to get a clean slate to start from is just to clone the existing
repo, delete the `.git/` dir and then re-initialise git in the new project.
- `git clone https://github.com/matt1/TsBoilerPlate.git MyNewProject`
- `cd MyNewProject`
- `rm -rf .git/`
- `git init`
You can safely delete the `hashes.md5` file (used for automated testig/verification) and the `.github` directory (contains config for this repo).
## Set up
You'll need to install the dependencies for this project with the following
command (dependencies are specified in package.json).
`npm install`
## Building the compiled bundle
`npx webpack`
This will build the compiled bundle and move everything to `dist/`. Everything
in this directory could then be uploaded to a server for instance.
## Live Reload
`webpack-dev-server --open`
This will run a live-reload server available on `localhost:8080` for local
development.
## Testing & Verification
This repo does some very basic checks to ensure that new changes do not break the webpack build using `md5sum` to generate the `hashes.md5` file. If you change the example content (e.g. HTML, CSS, or scripts) you'll need to re-generate these hashes so that the automated verification tests are checking against the right files:
`npx webpack && find dist -type f -exec md5sum {} + > hashes.md5`
N.B. these files use unix-style line-endings (LF only) - make sure your editor is not using CRLF or the hashes will be wrong. You might need to toggle from LF -> CRLF -> LF to ensure all are converted.
To check that the generated files match expectations, run:
`md5sum -c hashes.md5`