Typescript and Webpack tutorial for hater of those

Photo by Arian Darvishi on Unsplash

Using Frameworks is not my cup of tea, definitely.

But, I really like to get a code completions or IntelliSense on the other term. So, I wanted to use Typescript for that.

When we’re developing web, it is so easy to mess up with chunks of un-organised sources.

Photo by Jesús Rodríguez on Unsplash

I faced programming in an early teenager, with Visual Studio and Visual Basic. not with terminal and vi kinds of stuff. So code completion is really essential to me. I think many young devs also would be the same as me. otherwise, our previous generations were familiar with more raw environments without any plugins and settings. But I’m not.

So, in that reason. I decided to use Typescript and bunch of npm modules and my modules and wanted to wrap up well together. And I could find so many articles saying about Webpack. But I didn’t want those things.

Photo by Oleksii Hlembotskyi on Unsplash

Sass, React, Vue, blah blah.

Why? because I don’t know about that, I know there is no excuse. If I know about many frameworks, I’ll love to use those. There is no doubt.

But, I don’t know and I don’t want to use if this is not essential. I want to avoid as much as I can. I have not purely interest in the programming world. With so many people, I just want to make something. I want to leave programming as just a tool.

Photo by Cesar Carlevarino Aragon on Unsplash

Not… this…

I repeated to search documents and blog posts and video tutorial, and I posted a question in StackOverflow. So, expectably, I got down-thumbs. because of my question’s stupidity.

want to use Typescript, but I don’t want to use the Webpack. How should I do?

Photo by Daniel Páscoa on Unsplash

But, I found a youtube video series which uploaded by a YouTuber whom I subscribing and loving.

And after watching that and with 1-hour trials my self alone. I can do everything that I needed within it.

Now, Code

everything that I write is under the “/src”. and of course, for view, there is “/public/*.html”

I imported several types of a module to check workabilities.

“jsconst.js” is written by pure js. and “const.ts” is written by typescript. and “superheroes” is npm module, not belong in my “src” directory and I don’t modify that.

> jsconst.js

const jsMessage = "Hi"
export default jsMessage

> const.ts

const message = "Hi"
export default message

You should install typescript, ts-loader, webpack, webpack-cli.
But, you mightn’t need the webpack-dev-server.

after installing those modules and with the two configs files, all you have to do is just execute “webpack” command in your terminal.

➜  test $ webpack
webpack is watching the files…
Hash: dcd4448fe551d56af055
Version: webpack 4.44.1
Time: 1359ms
Built at: 09/14/2020 3:04:21 PM
            Asset      Size   Chunks             Chunk Names
contact.bundle.js  4.57 KiB  contact  [emitted]  contact
  index.bundle.js  53.5 KiB    index  [emitted]  index
Entrypoint index = index.bundle.js
Entrypoint contact = contact.bundle.js
[./src/const.ts] 46 bytes {index} [built]
[./src/contact.ts] 135 bytes {contact} [built]
[./src/index.ts] 305 bytes {index} [built]
[./src/jsconst.js] 47 bytes {index} [built]
    + 4 hidden modules

If you want to watch all about “+ 4 hidden modules”, execute this.

webpack --display-modules

So now, you not gonna see any errors. and you got those message from 3 different modules.

1. “Hi” in web came from “const.ts” typescript module what you have.
2. “Hi” in console came from “jsconst.js” common js module what you have
3. “Amphibian” in console came from “superheroes” module what you install through npm.

Now you granted full accessing with any type of modules in your front end with basics of typescript and webpack.

I want to separate, not one single bundle.js

You might definitely have a DOM control code in your source. but on each page, they have different DOM element, but if you have only one single bundle.js, how you make conditionalize the dom manipulation.

Would you use if block, and check the URL path???

Before, I really worried about how I can separate my bundles. because I’m not using React things and I don’t want to use a SPA (Single Page Application). So, how I separate the final bundle file generated by Typescript transpiler by each page routes and any purpose.

You can, after modifying some parts on webpack.config.js

...
entry: {
  index: "./src/index.ts",
  contact: "./src/contact.ts"
},
...
output: {
  publicPath: "public/lib",
  filename: "[name].bundle.js",
  path: path.resolve(__dirname, "public/lib"),
},
...

With these lines, if you want to make several final bundles, and load a js script on different HTML. You can define plural entry point.

I made the “const.ts”. and It will be built separately with the “index.ts”.

And I can load “contact.bundle.js” not only one “bundle.js”

Whenever you modified and saved a .ts and .js files under the “/src” dir, the ts transpiler will automatically generate those “*.js” files.

But, if you changed tsconfig.json or webpack.config.js. You should abort previous “webpack” command in your terminal. And execute again.

What I added to this post, is just about auto-save and bundle separation works. most everything is just that youtube course taught me.

Which I most fancy channels are here.

The Net Ninja

Dev Ed

Fireship

Sean Allen

Those channels are already so much famous. You might don’t need this recommendation.

Anyway, don’t be afraid to use webpack and typescript combination likely as I did