Geek Culture
Published in

Geek Culture

Setting Up Webpack for JavaScript, TypeScript and using Webpack Server

I really want to use Webpack for my projects, but without enough time or without motivation I have been avoiding Webpack 😥, and now I’m giving my first step adding to my projects and learning a lot with it 😀

Webpack

Wikipedia Said

webpack is an open-source JavaScript module bundler.

It helps make our files compress, and it can create chunks to our code to make better performance for our projects, actually it uses loaders to create all the magic and to expand the use of Webpack.

Well let’s start with JavaScript

You can watch it too!

You need to create a directory then inside that you have to create a NPM JSON file with the command

npm init -y

then you need to install Webpack and Webpack-cli

npm i --save-dev webpack webpack-cli

After that, you need to create a webpack-config file

Example webpack config file
Example webpack config file

Inside the webpack-config.js file, we can start with this code

Example code for Webpack-config.js file for JavaScript
Example code for Webpack-config.js file for JavaScript
const { resolve } = require( 'path' )
module.exports = {
entry: './src/main.js',
output: {
filename: 'prod.js',
path: resolve( __dirname, 'dist' )
},
devServer: {
static: {
directory: resolve( __dirname, '' )
}
},
target: 'node',
mode: 'production'
}

This code is to export the configuration start, we start with entry file , the output we specify the name file that will become our entry file after that we need a path the target and the mode if we want for development or production, the devServer is to start the webpack server you need to install the webpack-dev-server

npm i --save-dev webpack-dev-server

And change your package JSON

Add bundleup and develop for webpack-dev-server
Add bundleup and develop for webpack-dev-server

If you want to compile your JavaScript you need to run this command, and it will create the directory and the file

npm run bundleup
Example compiled file
Example compiled file
Example data from Webpack on console
Example data from Webpack on console

Well, let’s finish with TypeScript

You can watch it too!!

For TypeScript, you only need to install TypeScript initiated the tsconfig.json add moduleResolution, change a little the webpack-config.js and install the loader for TypeScript.

Installing ts-loader and typescript

npm i --save-dev ts-loader typescript

Changing the webpack-config.js we only added the module the rules for TypeScript the loader the files that will exclude the resolve and his extensions and that is all.

const { resolve } = require( 'path' )
module.exports = {
entry: './src/main.ts',
output: {
filename: 'prod.js',
path: resolve( __dirname, 'dist' )
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_module/,
use: 'ts-loader'
}]},
resolve: {
extensions: [ '.ts', '.js' ]
},
target: 'node',
mode: 'production'
}

add tsconfig.json to our project with this command:

tsc --init

Add moduleresolution to our tsconfig.json

Adding moduleResolution to our tsconfig file
Adding moduleResolution to our tsconfig file

Create a TypeScript file:

Example TypeScript file
Example TypeScript file

And run this command to compile our TypeScript file to a new JavaScript Production file.

npm run bundleup
Example data from Webpack on console
Example data from Webpack on console
Compiled file
Compiled file

Conclusion

This is a small practice to use Webpack as our compiler for production, it helps us with JavaScript and TypeScript with TypeScript could make good use, and you just need the ts-loader, we used the Webpack dev Server Package, and we started a server making this dynamic, and you can use Webpack as your preferred server we change a little our package JSON to start Webpack-cli and this was awesome, I hope you like it!

Sources

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

Track User’s Location and Display it on Google Maps

Creating Electron Installer for Both Mac Os and Windows

JavaScript Promise combinators: race, all, allSettled, any

Configure MongoDB connector

React Native: How to double or triple your AdMob revenues switching to Yodo1 MAS

Top 9 Most Popular AngularJS Frameworks for the Year 2020

Flutter VS React Native

Gloabal vs Local vs block scope in JavaScript?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rodrigo Figueroa

Rodrigo Figueroa

I’m a Web Developer, fanatic of books and Smash Player.

More from Medium

Build and Package an NPM Component with esbuild, React and TypeScript

ESBuild, React and Typescript

How to Add Animations with React Transition Group

Creating a Textarea with dynamic height using React and Typescript

Under the Hood of React useEffect Dependencies