Ahmed B. Hameed Ahmed B. Hameed - 3 years ago 191
TypeScript Question

How to bundle typescript with webpack?

I'm new to webpack.
i want to bundle my project which is written in typescript but the destination file has the same codes of typescript which are not readable by browser so what is the messing step in my configuration bellow?
The project works fine using script tags in html but i need to make them as bundle and make minified file after that.

package.json

{
"name": "filemanager",
"version": "1.0.0",
"description": "controls files using http for web hosting that has no FTP protocol.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"ts-loader": "^2.1.0",
"typescript": "^2.3.4",
"webpack": "^1.15.0"
}
}


tsconfig.json

{
"compilerOptions": {
"sourceMap": true
},
"files": [
"./ts/app.ts"
]
}


wepback.config.js

var path = require('path');
var webpack = require('webpack');
module.exports={
devtool: "source-map",
entry: './ts/app.ts',
output:{
path: './build',
filename: 'app.bundle.js'
},
rules:[{
test: /\.tsx?$/,
include: path.resolve(__dirname, "ts/"),
loader: "ts-loader",
exclude: /node_modules/,
}],
resolve:{
extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
},
// watch: true
}


my app path is ./ts/app.ts

import { controler } from './control'; // error stop here "Uncaught SyntaxError: Unexpected token import"
import { Injector } from './Injector';

window.onload = ()=>{
var DI = new Injector;
DI.process(controler);
}


Injector.ts

export class Injector{

private dependencies = {};
process(target){
let mainFun = null,
// tmpFun = ()=>{},
// FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m,
// FN_ARG_SPLIT = /,/,
// FN_ARG = /^\s*(_?)(\S+?)\1\s*$/,
// STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg,
// text = target[2].toString(),
// args = text.match(FN_ARGS)[1].replace(/\s/g, '').split(',');
args = [];

for(let key in target){
if(typeof target[key] != 'function'){
args.push(target[key]);
}else{
mainFun = target[key];
break;
}
}
// console.log(args, mainFun);

// tmpFun.prototype = mainFun.prototype;
// var instance = new tmpFun();
// console.log(tmpFun.prototype);

mainFun.prototype.constructor.apply(mainFun.prototype, this.getDependencies(args) );
// return instance;
}
getDependencies(arr){
return arr.map( (value)=>{
return this.dependencies[value];
});
}
register(name, dependency){
this.dependencies[name] = new dependency;
}

};


control.ts

declare var $: any;
declare var Promise: any;
export let controler = ['IMModel','IMView',class IMControl{
private im_model : any;
private im_view : any;
private wh : number; // save document height;
private ww : number; // save document width;
private siteMap = $('.aside');
private nextContainer : any; // store the next container for the new directories
public loadedPaths = []; // used to store all directories in aside menu to save repated requests
public loadedFiles = []; // used to store all files to save repated requests
private currentPath = null // used to store current path for upload new files in a specific directory
private currentItem = null // used to store current item to be ready with any selection choices
private searchResult = [];
private pathNavigator = $('.navbar .path');
private filesList = $('.explorer .filesList');
private isUploading : boolean = false;
private isAJAXFinished : boolean = true; // This is used to hold any action till response come back.
private newRequestReady : boolean = true; // This is used to check if the are more files to be loaded from the server otherwise it will be false.
private items = [];
private itemsIterations = 0;
private page = 1;
private defaultPath : any = [{
type: 'folder',
name: 'Root',
path: './img',
ext: 'folder',
chuldren: null
}];
private filesTypeMap = { 'avi' :'<i class="fa fa-file-video-o" aria-hidden="true"></i>',
'php' :'<i class="fa fa-file-code-o" aria-hidden="true"></i>',
'mkv' : '<i class="fa fa-video-camera" aria-hidden="true"></i>',
'mp4' : '<i class="fa fa-video-camera" aria-hidden="true"></i>',
'folder' : '<i class="fa fa-folder" aria-hidden="true"></i>',
'default' : '<i class="fa fa-file" aria-hidden="true"></i>' };
constructor(IMModel, IMView){
this.im_model = IMModel;
this.im_view = IMView;
this.onInit();
}
// rest of the code
}];

Answer Source

I solve my issue after a major research. for any extra information you can see my webpack template that i made.

This solve my issue here

Package.json

{
  "name": "ProjectName",
  "version": "1.0.0",
  "description": "Description",
  "main": "index.js",
  "scripts": {
    "clean": "rimraf ./dist/*",
    "prod": "cross-env NODE_ENV=production webpack -p --progress",
    "dev": "cross-env NODE_ENV=production webpack -d --progress --watch",
    "serve": "webpack-dev-server",
    "mini": "npm-run-all clean prod",
    "build": "npm-run-all clean dev"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "Me",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "devDependencies": {
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.28.0",
    "image-webpack-loader": "^3.3.1",
    "node-sass": "^4.5.3",
    "npm-run-all": "^4.0.2",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "svg-inline-loader": "^0.8.0",
    "ts-loader": "^2.1.0",
    "typescript": "^2.3.4",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

webpack.js

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const publicPath = 'assets/';

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: isProd,
    allChunks: true

});
const extractHtml = new htmlWebpackPlugin({
    title: 'Admin Panal',
    minify:{
        collapseWhitespace: false
    },
    hash: true,
    template: './src/index.html' // Load a custom template (ejs by default see the FAQ for details)
});

var isProd  = process.env.NODE_ENV === 'production', // this will return true or false depend on package.json
    cssDev  = ["style-loader","css-loader","sass-loader"],
    cssProd = extractSass.extract({
        use:[{
                loader: "css-loader", // translates SASS into Common CSS
                options: {sourceMap: true, convertToAbsoluteUrls: true } // convertTo.. will resolve images path
            }, {
                loader: "sass-loader"
            }],
        fallback: "style-loader"
    });
var cssConfig = isProd ? cssProd: cssDev;
module.exports={
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        stats: "errors-only",
        watchContentBase: true,
        hot: true,
        inline: true,
        open: true,
        port: 9000,
        openPage: ''
    },
    devtool: "source-map", // show .map files for better debugging.
    entry: './src/ts/app.ts',
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss', '.css']
    },
    module:{
        rules: 
        [{   
            test: /\.scss$/, 
            use: cssConfig
        },{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules/,
        },
        {
            test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2|json|xml|ico)(\?.*)?$/i,
            loader: [
                'file-loader?name='+publicPath+'[name].[ext]',
                {
                    loader: 'image-webpack-loader',
                    options: 
                    {
                        query: 
                        {
                            progressive: true,
                            optimizationLevel: 7,
                            interlaced: false,
                            pngquant:
                            {
                                quality: '65-90',
                                speed: 4
                            }
                        }
                    }
                }
            ]
        }]
    },
    plugins: [ extractHtml, extractSass,
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()]
}

This is a reference to the template.

Webpack_Template

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download