Menu
I am following this tutorial to learn webpack. It's out-dated, since the tools referenced are upgraded in my case. My versions are as follows.
After successfully creating a bundle.js file, I seem to be having problems accessing/referencing my TypeScript to JavaScript classes. My tsconfig.json looks like the following.
{
"compilerOptions": {
"module": "commonjs",
"sourceMap": true,
"declaration": true
},
"include": [
"src/**/*"
]
}
My wepack.config.js looks like the following.
var webpack = require('webpack');
module.exports = {
entry: './src/app.ts',
output: {
filename: 'bundle.js'
},
devtool: 'source-map',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
}
}
To transpile the TypeScript code, I simply type in tsc. To bundle all the code into bundle.js, I simply type in webpack. (tsc and webpack are installed globally).
In my src directory, I only have 2 simple classes. The car.ts looks like the following.
export class Car {
public sayHi(): void {
console.log('car says hi');
}
}
The app.ts looks like the following.
import { Car } from './car'; //alternatively, import Car = require('./car');
let car = new Car();
car.sayHi();
I then load this bundle.js into a browser in a HTML page as follows.
<html>
<head>
<title>Test Webpack</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
I can see in the (Chrome) JavaScript console the log message "car says hi". But how do I create a new instance of Car? The following attempts at the JavaScript console doesn't work.
var c1 = new Car(); //Uncaught reference error
var c2 = new car.Car(); //Uncaught reference error
Inside bundle.js, I do see this code/modules being generated (snippet).
/* 0 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var car_1 = __webpack_require__(1);
var car = new car_1.Car();
car.sayHi();
/***/ },
/* 1 */
/***/ function(module, exports) {
"use strict";
var Car = (function () {
function Car() {
}
Car.prototype.sayHi = function () {
console.log('car says hi');
};
return Car;
}());
exports.Car = Car;
/***/ }
My end goal is to get all TypeScript files in the src directory transpiled with (TypeScript) mappings into a single bundle.js as a module so I can use/reference the code (as JavaScript in a browser) as follows.
var car = new mylib.Car();
var plane = new mylib.Plane();
car.sayHi();
plane.sayHi();
Any ideas on what I'm doing wrong?
509
You need to set the output.library setting:
output: {
...
library: 'MyLibrary'
}
Then you can use it this way in the console:
var x = new MyLibrary.Car();
Webpack documentation (output.libray)
Similar answer on SO
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
