Help with TypeScript and Webpack [SOLVED]

1

Hey all, I was wondering if someone could help me with an issue I’m having using TypeScript and Webpack. This is for the weather viewer, I decided to go back and build it using TypeScript. At first I wasn’t using Webpack, I was just transpiling to JS and manually linking them in the HTML. The problem there was that the TS compiler was emitting JS that was incompatible with the browser (keywords like import and export) even though I was targeting ES5, so I was getting reference exceptions in my browser. Then I switched to Webpack, but Webpack was unable to resolve dependencies using the ts-loader when I was importing from one file to another, even though they were in the same directory.

Where I am now is that I’m transpiling my TS to ES2015 and using the babel-loader in Webpack to transpile to ES5. Webpack passes the bundling stage with no errors, and it says that the modules were bundled successfully, but there is no output. Here is the GitHub repo, and some of the more important code is below:

webpack.config.js 
var path = require('path');
//fixme: no output from operation
module.exports = {
    entry: "./src/app/js/index.js",
    output: {
        path: __dirname + 'dist/app',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: "style-loader!css-loader!sass-loader",
                include: [
                    path.resolve(__dirname, 'src/app/styles')
                ]
            },
            /*{
                test: /\.ts(x?)$/,
                loader: 'ts-loader',
                include: [
                    path.resolve(__dirname, 'src/app')
                ]/!*,
                exclude: /(node_modules)/!*!/
            }*/
            {
                test: /\.js$/,
                //exclude: /(node_modules)/,
                loader: 'babel-loader',
                include: [
                    path.resolve(__dirname, 'src/app/js')
                ],
                query: {
                    presets:['es2015']
                }
            }
        ]
    },
    resolve: {
        root:[
            path.resolve('./src/app')
        ]
    }
};
GetFromApi.ts 
/// <///<reference path="../../node_modules/@types/jquery/index.d.ts"/>
/**
 * This class will be used to get data from the backend API.
 */
export class GetFromApi {


	constructor(private testString: string) {

	}

	getResponse(): string {
		return this.testString;
	}
}
index.ts 
import {GetFromApi} from "./GetFromApi";

/// <reference path="../../node_modules/@types/jquery/index.d.ts" />
$(document).ready(function () {
	let getFromApi = new GetFromApi("this is a test");
	alert(getFromApi.getResponse());
});

Any help would be very appreciated!

1 Like
2

All you need is 2 small changes:

  1. in your webpack.config.js file on line 6, update it from
    path: __dirname + 'dist/app'
    to
    path: __dirname + '/dist/app' (note the slash in front of dist)

  2. In your index.html file you’ll need to update the path to the included bundle.js file from
    <script src="../dist/bundle.js"></script>
    to
    <script src="../dist/app/bundle.js"></script>

Making these 2 changes fixed you issue for me

3 Likes
3

Thank you, I can’t verify if this works until I get in front of my development machine, but thanks!

EDIT:
Tested this and it works perfectly. Such a simple mistake, I knew the path in the HTML was wrong, I was just trying to get the files bundled. Thanks @vdineva!