View package
"name": "WebpackTypescript1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack-dev-server",
"build:prod": "webpack -p"
View app.ts
import '../css/main.css';
import '../css/input-elements.css';
import {secretButton, secretParagraph } from './dom-loader';
let showSecret: boolean = false;
secretButton!.addEventListener('click', toggleSecretState);
View dom-loader.ts
export const secretButton: Element | null = document.querySelector('#secret-button');
export const secretParagraph: Element | null = document.querySelector('#secret-paragraph');
View webpack.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/js/app.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist'
View tsconfig
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
// "lib": [], /* Specify library files to be included in the compilation: */
"allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
View index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webpack 2 with Typescript</title>
View input-elements.css
button {
border: 1px solid black;
background-color: white;
padding: 8px;
font: inherit;
cursor: pointer;
outline: none;
button:hover {
View main.css
body {
font-family: Helvetica, Arial, sans-serif;
text-align: center;
h1 {
font-size: 28px;
margin: 20px;
package com.skiabox.java_apps2;
* Created by administrator on 10/10/2016.
public class Tiger extends Feline{
public void makeNoise() {
System.out.println("The tiger is growling");
package com.skiabox.java_apps2;
* Created by administrator on 09/10/2016.
public class Lion extends Feline{
//Lion methods
public void makeNoise() {