I have a bunch of typescript files following ecmascript 2015 module pattern in source folder. I have tsconfig setup to output the transpiled files to lib folder. That works good. But is there any way to bundle them together into a sigle file that can be used in the browser? I want my module to be available via npm and also as a script tag.
Refer to my dummy github project for details. tried the gulp-typescript, concat, uglify way, but in vain.
Use webpack with ts-loader to compile TypeScript and create a single bundle:
Install webpack
> npm install webpack ts-loader --save-dev
Create webpack.config.js
const path = require('path');
module.exports = {
entry: "./src/index.ts",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".js"]
},
module: {
rules: [{ test: /\.ts$/, loader: "ts-loader" }]
}
}
Run webpack
> webpack
You may also need to install webpack-cli (messages will tell you as you go to run the webpack command)
> npm install webpack-cli
See the documentation on webpack and ts-loader for more as configuration options change over time.
